• 解决的问题：作为子组件，可以根据父组件的某个变量，输出多个相同或者不同的html模板。
  • 比如有这样一个需求页面：

tabbar下内容每一个红色框内为一种 html模板，不同险种或者不同性质内容， html模板不同，方法1是定义4个组件，达到显示多个相同的模板A和其它多个不同的html模板，官网的说法是这样代码冗长，提供的简单方法2是 render函数，方法3是 JSX语法。 * render函数可以理解为 JS语法生成 html模板，感觉用起来没有 JSX顺手，不是很好理解。 * JSX语法简单可以理解为 JS里面混用 html语法生成 html模板，简单易用易理解。 * 好处就是方法1简化为一个组件，这个组件相当于一个 html模板制造工厂，根据需要（变量）产出不同 html模板，也可以是多个重复 html模板。

JSX

• jsx语法依赖Babel插件编译，不然无法识别会报错。需要配置

npm installbabel-plugin-syntax-jsxbabel-plugin-transform-vue-jsxbabel-helper-vue-jsx-merge-propsbabel-preset-env--save-dev复制代码

//.babelrc文件配置{"presets": ["env"],"plugins": ["transform-vue-jsx"],}复制代码

• 父组件template代码

    复制代码

• 子组件不需要template代码，因为JSX其实是代替了template渲染html，所以只需要js和styel代码

复制代码

• 备注：return括号内html模板必须要有一个根标签，同template规则
• 思路：将后台返回Array/Object格式数据在父组件利用v-for循环,item对象传入子组件，子组件根据变量insuranceType值判断最终渲染成何种html模板。更复杂场景可利用computed及method等选项控制。