slot分发内容

当需要让组件组合使用，混合父组件的内容和子组件的模板时，就会用到slot

1.1>例子：一个网站由一级导航，二级导航，左侧列表，正文以及底部5个模块组成，它就会用到slot

以<app>为例，它有两个特点：

1》<app>组件不知道它挂载点会有什么内容，挂载点的内容由<app>的父组件决定

2》<app>组件很可能有它自己的模板

1.2>作用域：

父组件模板的内容实在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译

solt分发的内容，作用域是在父组件上的

1.3>单个slot用法：在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将代替子组件<slot>标签以及他的内容。子组件<slot>内的备用内容，他的作用域是子组件本身。给<slot>元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

<div id="app">
   <child-component>
       <p>分发内容</p>
   </child-component>
</div>
<script>
Vue.component("child-component",{
	template:'\
	<div>\
	     <slot>\
	         <p>如果父组件没有插入内容，我们默认出现</p>\
	     </slot>\
	</div>'
});
var app=new Vue({
	el:"#app"
})
</script>

1.4>作用域插槽:最具代表性的是列表组件，允许组件自定义应该如何渲染列表每一项。

子组件的模板上，在<slot>元素上有一个类似props传递数据给组件的写法msg=“xxx”，将数据传递给插槽。父组件中使用<template>元素，而且还拥有一个scope=”props”的特性，props只是一个临时属性，它可以通过临时变量props访问来自子组件插槽的数据msg。

<div id="app">
   <child-component>
       <template scope="props">
       	   <p>来自父组件的内容</p>
       	   <p>{{props.msg}}</p>
       </template>   
   </child-component>
</div>
Vue.component("child-component",{
	template:'\
	<div class="contain">\
	   <slot msg="来自子组件的"></slot>\
	</div>'
});
var app=new Vue({
	el:"#app"
})

1.5>访问slot：访问被slot分发的内容的方法$slot

$slot可以访问某个具名slot，this.$slot.defaulf包括所有没有被包含在具体slot中的节点。

1.6>递归组件

组件在它的模板内可以递归调用自己，只要给组件设置name的选项就可以了。不过必须要给一个条件限制数量，不然会报错。

1.7>内联模板

Vue提供一个内联模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当做模板。不是非常特殊的场景，建立不要使用内联模板

<div id="app">
   <child-component inline-template>
   <div>
   	    <h2>在父组件中定义子组件</h2>
   	    <p>{{message}}</p>
   	    <p>{{msg}}</p>
   </div>
   </child-component>
</div>
Vue.component("child-component",{
	data:function(){
		return {
			msg:'在子组件声明数据'
		}
	}
});
var app=new Vue({
	el:"#app",
	data:{
		message:'在父组件声明数据'
	}
})

1.8>动态组件

Vue提供一个特殊元素<component>用来动态地挂载不同的组件，使用is特性来选择要挂载的组件

<div id="app">
   <component :is="currentView"></component>
   <button @click="handlechange('A')">切换到A</button>
    <button @click="handlechange('B')">切换到B</button>
    <button @click="handlechange('C')">切换到C</button>
</div>
var app=new Vue({
	el:"#app",
	components:{
		comA:{
			template:'<div>组件A</div>'
		},
		comB:{
			template:'<div>组件B</div>'
		},
		comC:{
			template:'<div>组件C</div>'
		}
	},
	data:{
		currentView:'comA'
	},
	methods:{
		handlechange:function(component){
			this.currentView='com'+component;
		}
	}	
})

1.9>异步组件

当工程足够大，使用的组件足够多的时候，需要考虑性能问题，因为一开始把所有的组件都加载是没有必要的一笔开销。Vue.js允许组件定义一个工厂函数，动态的解析组件，vue.js只在组件需要渲染的时候触发，并且把结果缓存起来，用于后面的再次渲染。

<div id="app">
    <child-component></child-component>
</div>
Vue.component("child-component",function(resolve,reject){
	window.setTimeout(function(){
		resolve({
			template:'<div>异步渲染的</div>'
		})
	},2000);
});
var app=new Vue({
	el:"#app"
})

1.10>X-Templates

在没有使用webpack，gulp等工具时，组件template的内容很冗长，复杂。Vue在<script>标签中使用text/x-template类型，并且指定id，将这个id赋给template。