是时候使用JSX
代替createElement
了
接着上面的讲,当我们看到上面用createElement
去实现组件,太麻烦了,别说工作效率提高了,就是那些嵌套可以嵌套正确就很赞了,所以我们需要用JSX
去简化整个逻辑。当年我做项目的时候就遇到过这样的情况,嵌套太多,自己都快搞不明白了,在崩溃的边缘。
methods: {
$_handleInputUser(value) {
this.formInline.user = value
},
$_handleChangeRegion(value) {
this.formInline.region = value
},
$_handleSubmit() {
}
},
/**
*将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的 3.4.0 *版本开始,我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入
*const h = this.$createElement,这样你就可以去掉 (h) 参数了。对于更早版本的插件,如果 h 在当前作用域中不可用,应用会抛错。
*/
render(h) {
return (
<ElForm inline model={
this.formInline} class="demo-form-inline">
<ElFormItem label="审批人">
<ElInput
value={
this.formInline.user}
onInput={
this.$_handleInputUser}
placeholder="审批人"
></ElInput>
</ElFormItem>
<ElFormItem label="活动区域">
<ElSelect
value={
this.formInline.region}
onChange={
this.$_handleChangeRegion}
placeholder="活动区域"
>
<ElOption label="区域一" value="shanghai"></ElOption>
<ElOption label="区域二" value="beijing"></ElOption>
</ElSelect>
</ElFormItem>
<ElFormItem>
<ElButton type="primarty" onClick={
this.$_handleSubmit}>
查询
</ElButton>
</ElFormItem>
</ElForm>
)
}
看了上面的代码,大家其实会发现用JSX
与template
的语法都属于xml
的写法,而且也比较像,但实质上还是有许多区别的,下面我将为大家一一分析
没有v-model
怎么办,还有其他指令可以用吗?
当你选择使用JSX
的时候,你就要做好和指令说拜拜的时候了,在JSX
中, 你唯一可以使用的指令是v-show
,除此之外,其他指令都是不可以使用的,有没有感到很慌,这就对了。不过呢,换一个角度思考,指令只是Vue
在模板代码里面提供的语法糖,现在你已经可以写Js
了,那些语法糖用Js
都可以代替了。
v-model
v-model
是Vue
提供的一个语法糖,它本质上是由 value
属性(默认) + input
事件(默认)组成的。所以,在JSX
中,我们便可以回归本质,通过传递value
属性并监听input
事件来实现数据的双向绑定
export default {
data() {
return {
name: ''
}
},
methods: {
// 监听 onInput 事件进行赋值操作
$_h