我在这里以使用elementUI为例
v-model 是 Vue 提供的一个语法糖，它本质上是由 value 属性 + input 事件组成的（都是原生的，最后我们再说如何使用指令）
如果你写了很多 render 函数，可能会觉得下面这样的代码写起来很痛苦：
render(h) {
return h("el-input", {
props: {
value: this.value,
},
on: {
input: function(val) {
this.value = val;
},
},
});
},
有一个 Babel 插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
babel.config.js
module.exports = {
presets: ['@vue/babel-preset-jsx'],
}
使用jsx后：
render(h) {
return( <el-input value={this.value} onInput={$event => this.value = $event}></el-input> )
)
},
跟 react 一模一样了
Vue JSX 中指令的使用
我们使用 Vue 模板语法，指令用的爽歪歪，像 v-model, v-if, v-for, @等
但是，这些都在 JSX 中无法使用。那么如何实现相同的功能呢
注意：新版 vue-cli4 中，已经默认集成了 JSX 语法对 v-model 的支持，可以直接使用 v-model
如果你的项目比较老，也可以安装插件来进行支持
npm install @vue/babel-plugin-jsx -D 或者 淘宝镜像的cnpm
babel.config.js
"plugins": ["@vue/babel-plugin-jsx"],
然后就可以使用v-model了
render(h) {
return( <el-input v-model={this.value} placeholder="请输入"/> )
)
},
el-form案例：
注意 el-form 的 :model 属性，在 JSX 中是这样写的 props={{ model: this.data }}，比较特别
render(h) {
return(
<el-form
ref="form"
labelWidth="140px"
props={{ model: this.data }} // 注意:model要改成这样写
rules={this.rules}>
<el-form-item label="券码编号: ">
<el-input v-model={this.data.voucherCode}></el-input>
</el-form-item>
</el-form>
)
},
v-if 简单的话可以使用三元表达式，复杂的话就得多写些代码了
render(h) {
var bool = false
return(
<div>
{ bool ? <el-button>按钮1</el-button> : <el-button>按钮2</el-button>}
</div>
)
}
render(h) {
var num = 3
if(num === 1){ return( <el-button>按钮1</el-button> ) }
if(num === 2){ return( <el-button>按钮2</el-button> ) }
if(num === 3){ return( <el-button>按钮3</el-button> ) }
}
v-for 就使用 map 方法来实现
render(h) {
var list = [1,2,3]
return(
<div>
{ list.map(item => <el-button>按钮{item}</el-button>) }
</div>
)
}
@事件想到用 onChange, onClick
需要注意的是，传参数不能使用 onClick={this.removePhone(params)}，这样子会每次 render 的时候都会自动执行一次方法
应该使用 bind，或者箭头函数来传参
render(h) {
return(
<div>
<el-button onClick={() => this.handleClick(11)}>按钮</el-button>
</div>
)
}
