vue-cli2 component 标签的使用

vue-cli2 component 标签的使用

1、 直接使用

<template>
	<!-- is 指组件名 这么写需要引入并注册组件 -->
	<component is="Test"></component>
</template>

<script>
	import Test from '../common/Test'; // 引入

	export default {
		name: 'parent', // 这里是父组件
		components: {
			Test, // 注册
		}
	}
</script>

2、 动态引入组件

<template>
	<!-- 给 is 绑定上 -->
	<!-- 给对应的子组件传参和使用其他子组件一样就可以啦 -->
	<component 
	  :is="getComponent"
	  :data="data"
	  :width="width"
	  :id="id"
	>
	</component>
</template>

<script>
	export default {
		name: 'parent', // 这里是父组件
		data() {
			return {
				componentName: 'test', // 只需修改这里即可
				data: [],
				width: '100%',
				id: 'xxx',
			};
		},
		computed: {
			// 获取组件
			getComponent() {
				// 列出 组件 配置表
				let componentConfig = {
					test: import('../common/Test'),
					test1: import('../common/Test1'),
				};
				// 直接调用就行啦
				return () => componentConfig[this.componentName];
			},
		},
	}
</script>