vue jsx 记录

vue jsx 记录

template的写法 是 vue 的灵魂，jsx的写法就没那味了。虽然我一直都是这么相信的，但是template写久了感觉没啥新鲜感，于是打算用jsx的写法来解闷。

写jsx你需要准备什么？啥都不需要，虽然官网建议安装@vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props，但是为了尝鲜和减少对项目的影响，你可以直接在render函数内体验jsx语法！

render函数

render 函数 需要返回一个 jsx 写法的数据

render(){
      return (<div class="wrapper">{this.contentRender()}</div>)
},
methods:{
      contentRender(){
            // 函数必须有返回值
            return (<p>hello world!!</p>)
      }
}

props传递

:xxx="xxx" 改成 xxx={xxx},如果访问的是data或者props数据，要加上this.xxx

<parent data={this.data} ...></parent>

注意：1. .sync的修饰符在jsx用不了。2. v-model 改成 vModel

事件监听

@改成 on-

<parent on-success={()=>this.onSuccess()}></parent>

注意： 原生事件的修饰符可能用不了，官方的写法需要安装插件编译 传送门

v-if 和 v-for

v-if 可以用 js条件判断和三元运算符来代替；v-for 可以用数组遍历来代替

// v-if
{!!this.show && (<div>show me</div>)}

//or
{this.show? (<div>show </div>):(<div>hide </div>)}

// v-for
{
      this.arr.map(item=>{
            return (<p key={item.id}>{item.name}</p>)
      })
}

v-on="$listeners" 和 v-bind="$attrs"

可以用{props: ...this.$attrs, on: ...this.$listeners} 代替

render(){
      return <div {...{props: ...this.$attrs, on: ...this.$listeners}}></div>
}

filters过滤器

这个只能通过函数来调用，如果定义了全局的过滤器，可以通过 this.$options.filters拿到对应的过滤函数

自定义指令

定义一个数组对象，存储对应的指令，然后通过展开符传入

function itemRender(item){
      let directives = [{name: 'lazy, value: item.src} ];
      return <div {...directives}></div>
}

slot

slot插槽主要分为两种情况：具名插槽，作用域插槽

定义插槽

可通过 this.$slots.xxx 或者 this.$scopedSlots.xxx 定义slot

render(){
      return (<div>{this.$slots.default}</div>)
  //  return (<div>{this.$scopedSlots&&this.$scopedSlots.default()}</div>)
}

注意： $slots 和 $scopedSlots 的区别在于 ，前者是对象，后者是函数，在调用函数之前要先判断该函数是否存在

使用插槽

具名的插槽可以通过slot="xxx"来使用，作用域的插槽要通过对象来调用

render(){
      const scopedSlots = {
            default:(data)=>{return <span>scoped slot</span>}
      }
      return (<div scopedSlots ={scopedSlots}>
      <template slot="default"><span>default slot</span></template>
</div>)

}