一、明确需求
如何渲染动态组件呢？【相关推荐：vuejs视频教程】
(相关资料图)
有一组数组结构如下：
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去渲染出真正的组件。
登录后复制有请今天的主角JSX上场。
2.3 JSX动态渲染组件
父组件
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 ( ); },};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 ( 登录后复制我们利用JSX的render可以写JavaScript返回组件，来实现我们动态渲染标签。
render相当于我们vue中的模板。
于是渲染出的效果如下：根据tag渲染成真正的组件
我们用普通的组件，无法像JSX一样渲染成我们想要的组件。
这里的v-model用计算属性的坑，我推荐看一遍：实战v-model如何绑定多循环表达式(内含原理)
其实这两篇是有一定的挂钩的，只不过我在这里拆开了需求。
主要也是方便朋友们阅读理解。
三、vue中如何使用JSX
借着该需求，我们恶补一下JSX。
3.1 是什么？
JSX 是一种 Javascript 的语法扩展，JSX = Javascript + XML，即在 Javascript 里面写 XML，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性。
3.2 基本用法
3.2.1 函数式组件
我们在组件中，也可以嵌入ButtonCounter组件。
const ButtonCounter = { name: "button-counter", props: ["count"], methods: { onClick() { this.$emit("changeNum", this.count + 1); } }, render() { return ; }};export default { name: "HelloWorld", props: { msg: String }, data() { return { count: 0 }; }, methods: { // 改变button按钮数量 changeNum(val) { this.count = val; } }, render() { const { count } = this; // 解构 return ( 登录后复制3.2.2 普通属性、行内样式、动态class与style
可以看到，其实和vue的模板写法基本一致，只不过要注意的是花括号；
在vue的模板是要写两对花括号，而在JSX只需要写一对。
export default { name: "HelloWorld", props: { msg: String }, data() { return { count: 0, text: "Hello World!", msgClass: "msg-class", isGreen: true }; }, render() { const { count, text } = this; // 解构 return ( 动态绑定class
动态绑定style
); }};登录后复制3.2.3 常用指令
v-html、v-if、v-for、v-model常用指令在JSX中无法使用，需要使用其他方式来实现。
v-html
在JSX中，如果要设置DOM的innerHTML,需要用到domProps。
组件使用：
这是自定义的DOM
