Vue如何高效通过JSX动态渲染组件

一、明确需求

如何渲染动态组件呢？

有一组数组结构如下：

const arr = [ { tag: 'van-field' },// 输入框{ tag: 'van-cell' }, // 弹出层{ tag: 'van-stepper' } // 步进器
] 

想通过循环arr，拿到tag渲染对应的组件。

下面我们分析如何写才是最优。

二、进行分析

2.1 v-if走天下

我们可以写一个v-for去循环arr数组，然后通过v-if去判断tag，渲染对应的组件类型。

这样子写不是不可以，只不过扩展性不好，每次加一个标签，模板就要再加一个v-if。

我相信很多人起初都是这样写。

但这不是我们优雅人该写的代码。

2.2 动态渲染组件标签

我们能不能根据tag的标签来渲染出真正的标签。

关键是循环内，怎么根据遍历的tag去渲染出真正的组件。

<van-cellv-for="(cell, cellKey) in arr" :key="cellKey" ><!-- 动态渲染-->
</van-cell> 

有请今天的主角JSX上场。

2.3 JSX动态渲染组件

父组件

<van-cellv-for="(cell, cellKey) in arr" :key="cellKey" ><!-- 用jsx动态渲染--><RendTag :cell="cell" />
</van-cell>

const arr = [ { tag: 'van-field' },// 输入框{ tag: 'van-cell' }, // 弹出层{ tag: 'van-stepper' } // 步进器
] 

子组件RendTag.vue

<script>
const AssemblyRend = {name: "assembly-rend",props: ["cell"],data() {return {input: "",};},methods: {onClick() {this.$emit("changeTag", this.input);},},computed:{itemVal:{get(){return this.cell.value},set(v){this.cell.value = v}}},render() {const { cell } = this; // 解构const assembly = cell.tag;// 这里就是我们动态渲染组件的核心 return (<assemblyv-model={this.itemVal}placeholder={cell.placeholder}min={cell.min}onClick={this.onClick}></assembly>);},
};

export default {name: "RendTag",props: {cell: {type: Object,default:()=>{return {
  {"title": "能否输入",placeholder: '请输入姓名',"value": "name","tag": "van-switch",}}}},},methods: {changeTag(val) {},},render() {const { cell } = this; // 解构return (<div class="rendTag-content"><AssemblyRendcell={cell}onChangeTag={this.changeTag}></AssemblyRend></div>);},
};
</script> 

<