Vue中插槽的使用

插槽slot的使用：
使用场景----父组件向子组件传递dom结构。

<div id="root">
  <child>
	// <p>Dell</p>
	<div class='header' slot='header'>header</div> // 具名插槽
	<div class='footer' slot='footer'>footer</div>
  </child>
</div>

Vue.component('child', {
   template: `<div>
		<slot name="header">slot默认内容</slot>
		<div class='content'>content</div>
		<slot name="footer"></slot>
	      </div>`
})

//------------------------
Vue中的作用域插槽。eg:列表中每一项怎么显示，由外部告知。
作用域插槽必须以template开头和结尾，声明接收的数据放在props。
当子组件做循环；或某一部分的DOM结构应该由外部传递进来的时候。

使用作用域插槽，子组件可以向父组件的插槽中传递数据item，
如果想接收数据，必须在外层使用template，同时通过slot-scope对应的属性的名字，
来接受传递过来的所有的数据。

<div id="root">
  <child>
	<template slot-scope='props'>
		// 具体显示的模板信息
		<li>{{props.item}}</li>
	</template>
  </child>
</div>

Vue.component('child', {
	data: function() {
	  return {
		list: [1, 2, 3, 4]
	  }
	},
	template: `<div>
		   <ul>
			<slot
			  v-for="item of list"
			  :item=item
                         ></slot>
		         <li v-for="item of list">{{item}}</li>
		   </ul>				
		  </div>`
})

 动态组件component与v-once指令

//------------------------
动态组件component与v-once指令
<div id="root">
	<component :is='type'></component>
	<!--
	<child-one v-if="type === 'child-one'"><child-one>
	<child-two v-if="type === 'child-two'"><child-two>
	-->
	<button @click="handleBtnClick">change</button>
</div>

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

var vm = new Vue({
	data: {
		type: 'child-one'
	},
	methods: {
		handleBtnClick:function() {
			this.type = (this.type==='child-one'?'child-two':'child-one')
		}
	}
})
v-once 能提高静态内容的展示效率，能从内存直接拿要显示的toggle内容。