当然不是,你可以定义method
,然后在method
里面返回JSX
,然后在render
函数里面调用这个方法,不仅如此,JSX
还可以直接赋值给变量,比如下面这段代码
methods: { $_renderFooter() { return ( <div> <ElButton>确定</ElButton> <ElButton>取消</ElButton> </div> ) } }, render() { const buttons = this.$_renderFooter() return ( <ElDialog visible={this.visible}> <div>这里是一大坨内容</div> <template slot="footer">{buttons}</template> </ElDialog> ) }
就算我今天不吃晚饭,也要把指令给大家讲讲
基础用法
虽然大部分内置的指令无法直接在JSX
里面使用,但是自定义的指令可以在JSX
里面使用,就拿element-ui
的v-loading
指令来说,可以这样用
render() { /** * 一个组件上面可以使用多个指令,所以是一个数组 * name 对应指令的名称, 需要去掉 v- 前缀 * value 对应 `v-loading="value"`中的value */ const directives = [{ name: ‘loading‘, value: this.loading }] return ( <div {...{ directives }} ></div> ) }
修饰符
有些指令还可以使用修饰符,比如上例中的v-loading
,你可以通过修饰符指定是否全屏遮罩,是否锁定屏幕的滚动,这时候就需要这样写 v-loading.fullscreen.lock = "loading"
render() { /** * modifiers指定修饰符,如果使用某一个修饰符,则指定这个修饰符的值为 true * 不使用可以设置为false或者直接删掉 */ const directives = [ { name: ‘loading‘, value: this.loading, modifiers: { fullscreen: true, lock: false } } ] return ( <div {...{ directives }} ></div> ) }
总结