学Vue,就要学会vue JSX(大结局)

只能在render函数里面使用JSX

当然不是,你可以定义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-uiv-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>
     )
   }

 

 

总结

好了,今天讲到这里已经把vue JSX讲完了。这一内容基本上讲的差不多了。觉得对您有帮助的可以帮忙点个赞。在这里谢谢大家了。我会不断出新的优质的文章给大家分享,一起学习进步。

 

学Vue,就要学会vue JSX(大结局)

上一篇:jquery 获取自定义属性的值 data-*


下一篇:.NET Fx to .NET Core