Vue jsx 使用技巧

[huangshuwei]

前言

总结下在vue 中使用 jsx 的技巧。

jsx 绑定事件

默认jsx 中绑定事件的语法为 onXx。如：

// child comp
...
name:"child-comp"
mounted:{
    this.emit("valueChange",args)
}
...

绑定子组件的事件

// parent comp
...
methods:{
   change(){}
},
render(){
    return <child-comp onValueChange={()=>this.change()} />
}
...

如果子组件抛出的事件名本身就是以 on 开头，则需要换种方法绑定子组件事件。如：

// child comp
...
name:"child-comp"
mounted:{
    this.emit("onValueChange",args)
}
...

使用propsXx绑定子组件的事件

// parent comp
...
methods:{
   change(){}
},
render(){
    return <child-comp propsOnValueChange={()=>this.change()} />
}
...

或者使用展开绑定子组件的事件

// parent comp
...
methods:{
   change(){}
},
render(){
    return <child-comp {
        ...{
            props:{
                 onValueChange={()=>this.change()}
               }
          }
    } />
}
...

更新中...