Vue中插槽的使用

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

  
	// 
Dell
	
header
 // 具名插槽
	
footer
  


Vue.component('child', {
   template: `

		slot默认内容
		
content
		
	      
`
})

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

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

  
	
  


Vue.component('child', {
	data: function() {
	  return {
		list: [1, 2, 3, 4]
	  }
	},
	template: `

		   

			
		         
{{item}}
		   
				
		  
`
})

 动态组件component与v-once指令

//------------------------
动态组件component与v-once指令

	
	
	change


Vue.component('child-one', {
	template: '
child-one
'
})
Vue.component('child-two', {
	template: '
child-two
'
})

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