Vue中，利用JSX语法生成不同html模板

• 解决的问题：作为子组件，可以根据父组件的某个变量，输出多个相同或者不同的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 install
babel-plugin-syntax-jsx
babel-plugin-transform-vue-jsx
babel-helper-vue-jsx-merge-props
babel-preset-env
--save-dev
复制代码

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

• 父组件template代码

<template>
	<div class="underway scroller-box">//sfmui框架内组件上拉加载更多、下拉刷新
		<v-scroller-y  v-if="!isNOData" ref="scrollery" :scrollBar="true" :pullDown=pullDown :loadMore=loadMore>	
			<div slot="pulldown" class="pulldown">
				<v-spinner v-show="pullDownFlag" type="crescent" :tip="pullDownTip" size="20px"></v-spinner>
			</div>		
      	    //JSX语法子组件
			<home-list :data="item" v-for="item in underwayList" :key="item.id"></home-list>
			
			<div slot="loadmore" class="loadmore">
				<v-spinner v-show="loadMoreFlag" type="crescent" :tip="loadMoreTip" size="20px"></v-spinner>
				<v-divider v-show="!loadMoreFlag" :lineShort="true">{{loadMoreTip}}</v-divider>
			</div>
		</v-scroller-y>
		
		<div class="blank" v-if="isNOData">//无数据时占位图
			<img src="../assets/空白图.png" />
			<p>暂无进行中的需求哦</p>
		</div>
	</div>
</template>
复制代码

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

<script>
	export default {
		props: {//接收父组件传值
			data: Object
		},
		data() {
		    return {
                        msg:'hello JSX'
		    };
		},
		created(){},
		methods: {},
		render(h) {
			var list
			if(this.data.insuranceType== 1){//模板1
				list = (
			      	<div>
				        重疾险...
				        <div>....</div>
				</div>
		      	);
			}else if (this.data.insuranceType == 2) {//模板2
				list = (
			      	<div>
				        意外险...
				        <div>....</div>
				</div>
		      	);
			}else if (this.data.insuranceType == 3) {//模板3
		      list = (
		      	<div>
			        <p>姓名：{this.data.name}</p>
				<p>日期：{this.data.putInOrOutTime}</p>
				...
			</div>
		      );
		    }
		    return (//最终渲染的模板
		      <div class="item" on-click={this.handleGo}>
				{list}
			</div>
		    );
		}
	}
</script>

<style lang="less" scoped></style>
复制代码

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

转载于:https://juejin.im/post/5b0537c6f265da0b8263286f