Vue JSX 语法
render 函数之 JSX 应用
- 一。模板缺陷
- 二。函数式组件
- 三。JSX 应用
- 四。render 方法订制组件
- 五。scope-slot
- 六。编写可编辑表格
一。模板组件的缺陷
文件是.vue
文件,模板的最大特点是扩展难度大,不易扩展。可能会造成逻辑冗余
<Level :type="1">哈哈</Level>
<Level :type="2">哈哈</Level>
<Level :type="3">哈哈</Level>
Level 组件需要对不同的 type 产生不同的标签
<template>
<h1 v-if="type==1">
<slot></slot>
</h1>
<h2 v-else-if="type==2">
<slot></slot>
</h2>
<h3 v-else-if="type==3">
<slot></slot>
</h3>
</template>
<script>
export default {
props: {
type: {
type: Number
}
}
};
</script>
二。函数式组件
文件是.js
文件,函数式组件没有模板,只允许提供 render 函数,可以把复杂的逻辑变得非常简单
当时创建 html 时候还是有点麻烦,所以就有jsx
了
export default {
render(h) {
return h("h" + this.type, {}, this.$slots.default);
},
props: {
type: {
type: Number
}
}
};
三。JSX 应用
使用 jsx
会让代码看起来更加简洁易于读取
export default {
render(h) {
const tag = "h" + this.type;
return <tag>{this.$slots.default}</tag>;
},
props: {
type: {
type: Number
}
}
};
四。render 方法订制组件
编写 List 组件可以根据用户传入的数据自动循环列表
|
|
通过 render 方法来订制组件,在父组件中传入 render 方法
|
|
我们需要 createElement 方法,就会想到可以编写个函数组件,将 createElement 方法传递出来
|
|
ListItem.vue 调用最外层的 render 方法,将 createElement 和当前项传递出来
|
|
五。scope-slot
??????????????????????
使用 v-slot 将内部值传即可
|
|
六。编写可编辑表格
基于 iview 使用 jsx 扩展成可编辑的表格
|
|