学Vue，就要学会vue JSX（三）
是时候使用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 (
查询
)
}
看了上面的代码，大家其实会发现用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 事件进行赋值操作
$_handleInput(e) {
this.name = e.target.value
}
},
render() {
// 传递 value 属性 并监听 onInput事件
return
}
}
经我测试,在新版脚手架vue-cli4中，已经默认集成了对v-model的支持，大家可以直接使用``，如果你的项目比较老，也可以安装插件babel-plugin-jsx-v-model来进行支持
同样的，在JSX中，对于.sync也需要用属性+事件来实现，如下代码所示：
export default {
methods: {
$_handleChangeVisible(value) {
this.visible = value
}
},
render() {
return (
{/*这里就是默认插槽*/}
)
}
自定义默认插槽
在Vue的实例this上面有一个属性$slots,这个上面就挂载了一个这个组件内部的所有插槽，使用this.$slots.default就可以将默认插槽加入到组件内部
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
render() {
return (
确定
取消
)
}
自定义具名插槽
在上节自定义默认插槽时提到了$slots，对于默认插槽使用this.$slots.default，而对于具名插槽，可以使用this.$slots.footer进行自定义
render() {
return (
{
return
)
}
自定义作用域插槽
使用作用域插槽不同，定义作用域插槽也与模板代码里面有所不同。加入我们自定义了一个列表项组件，用户希望可以自定义列表项标题，这时候就需要将列表的数据通过作用域插槽传出来。
render() {
const { data } = this
// 获取标题作用域插槽
const titleSlot = this.$scopedSlots.title
return (
-
{list.map(item => {
return
- {item} })}
这是Heo写的一篇新的文章
'
}
},
render() {
// v-html 指令在JSX的写法是 domPropsInnerHTML
return
}
}
v-text: 看了上面的v-html，你是不是立即就想到了v-text在JSX的写法domPropsInnerText,是的，你没有想错
export default {
data() {
return {
content: '这是Heo写的一篇新的文章的内容'
}
},
render() {
return
}
}
但实际上我们不需要使用domPropsInnerText,而是将文本作为元素的子节点去使用即可
{this.content}
实际上，对于domProps，只有innerHTML才需要使用domPropsInnerHTML的写法，其他使用正常写法即可
我还要监听事件呢
监听事件与原生事件
当我们开发一个组件之后，一般会通过this.$emit('change')的方式对外暴露事件，然后通过v-on:change的方式去监听事件，很遗憾，在JSX中你无法使用v-on指令，但你将解锁一个新的姿势
render() {
return 这里是弹框内容
{/**通过this.$slots.default定义默认插槽*/}
{this.$slots.default}
)
}
}
具名插槽
使用具名插槽
有时候我们一个组件需要多个插槽，这时候就需要为每一个插槽起一个名字，比如element-ui的弹框可以定义底部按钮区的内容，就是用了名字为footer的插槽
render() {
return (
这里是弹框内容
{/** 具名插槽 */}
{this.$slots.default}
{/**自定义具名插槽*/}
)
}
作用域插槽
使用作用域插槽
有时让插槽内容能够访问子组件中才有的数据是很有用的，这时候就需要用到作用域插槽,在JSX中，因为没有v-slot指令，所以作用域插槽的使用方式就与模板代码里面的方式有所不同了。比如在element-ui中，我们使用el-table的时候可以自定义表格单元格的内容，这时候就需要用到作用域插槽
data() {
return {
data: [
{
name: 'Heo'
}
]
}
},
render() {
return (
{/**scopedSlots即作用域插槽，default为默认插槽，如果是具名插槽，将default该为对应插槽名称即可*/}
{this.$slots.footer}
{row.name}
}
}}
>
{/** 如果有标题插槽，则使用标题插槽，否则使用默认标题 */}
{titleSlot ? titleSlot(data) : {data.title}}
)
}
ok。vue JSX 的重点就已经讲完了。下面一篇文章来讲一下注意的地方和总结。大家觉得对你有帮助的话可以给我点个赞哦，推荐给更多的人看。
发表评论 (审核通过后显示评论)：