引出动态组件

从简单组件开始

<body>
	<dir id="root">
		<child-one></child-one>
		<child-two></child-two>
		<button>change</button>
	</dir>

	<script type="text/javascript">
		Vue.component('child-one',{
			template:'<div>child-one</div>'
		})

		Vue.component('child-two',{
			template:'<div>child-two</div>'
		})

		var vm =new Vue({
			el:'#root',
			data:{
				type:'child-one'
			}
		})
	</script>
</body>

期望的功能

这里我们想实现点击按钮交替显示两个组件。

思路：设置一个数据 type，并在两个组件中监听 type 的值，来决定组件是否被使用，在点击函数中通过判断 type 值来实现改变type值的操作，进而使监听的组件显示或消失。

<body>
	<dir id="root">
		<child-one v-if="type==='child-one'"></child-one>
		<child-two v-if="type==='child-two'"></child-two>
		<button @click="handleclick">change</button>
	</dir>

	<script type="text/javascript">
		Vue.component('child-one',{
			template:'<div>child-one</div>'
		})

		Vue.component('child-two',{
			template:'<div>child-two</div>'
		})

		var vm =new Vue({
			el:'#root',
			data:{
				type:'child-one'
			},
			methods:{
				handleclick:function(){
					this.type = (this.type==='child-one'?'child-two':'child-one');
				}
			}
		})
	</script>
</body>

出来吧动态组件

语法

\<component :is="组件名">\</component>

用此标签替代原来多个标签，可以使HTML部分更加简洁。

优化上面例子

<body>
	<dir id="root">
		<component :is="type"></component>
		<button @click="handleclick">change</button>
	</dir>

	<script type="text/javascript">
		Vue.component('child-one',{
			template:'<div>child-one</div>'
		})

		Vue.component('child-two',{
			template:'<div>child-two</div>'
		})

		var vm =new Vue({
			el:'#root',
			data:{
				type:'child-one'
			},
			methods:{
				handleclick:function(){
					this.type = (this.type==='child-one'?'child-two':'child-one');
				}
			}
		})
	</script>
</body>

动态组件的作用原理:通过“:is”，查找父组件中type为何值，通过type值（下面看出来其实还是组件名）来确定显示哪个组件名。

v-once指令

语法

<div v-once>...</div>

给盒子加上属性后，不必每次渲染都销毁或新建，可以提高静态内容的展示效率。

使用

我们先回到没有用动态组件的代码，然后在组件中加以使用：

Vue.component('child-one',{
    template:'<div v-once>child-one</div>'
})

Vue.component('child-two',{
    template:'<div v-once>child-two</div>'
})

Vue的动态组件&v-once指令