使用slot分发内容

什么是slot

props 传递数据、event触发事件和slot内容分发就构成了vue组件的三个API来源，再复杂的组件都是这三部分组成的

1. 需要组件组合使用时，混合父组件的内容与子组件的模板，就会用到slot，这个过程叫做 内容分发(transclusion)
2. 组件标签内部的内容就是slot
   <child-component>this is a slot</child-compoent>
   1. 父组件模板中的内容在父组件作用域内编译；子组件模板的内容是在子组件作用域内编译。
      2.slot分发的内容，作用域是在父组件上的

slot的用法

1. 单个slot
   在子组件内使用特殊的slot元素就可以为这个组件开启一个slot，在父组件模板里，插入在子组件标签内的所有内容将替代子组件的slot标签及其他内容

<div id="app">
	<child-component>
		<p>this is first slot-content</p>
		<p>this is second slot-content</p>
	</child-component>
</div>

Vue.component('child-component',{
	template:`<div> 
		<slot>
			<p>如果父组件没有插入内容，这将是默认内容</p>
		</slot>
		</div>`
})
const vm = new Vue({
	el:'#app'
})

---

<div id="app">
	<div>
		<p>this is first slot-content</p>
		<p>this is second slot-content</p>
	</div>
</div>

2. 具名插槽

• 给slot元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存
• 没有使用name特性将作为默认slot出现，父组件内没有使用slot特性的元素与内容都会出现在这里
• 如果没有指定默认的匿名slot，父组件内多余的内容片段都将被抛弃

<div id= "app">
	<child-component>
		<h2 slot="header">标题</h2>
		<p>这是正文内容</p>
		<p>这是更多的正文内容</p>
		<div slot="footer">底部信息</div>
	</child-component>
</div>

new Vue({
	el:"#app"
})
Vue.component('child-component',{
	template:`
	<div class="container">
		<div class="header">
			<div class="header">
				<slot name="header"></slot>
			</div>
			<div class="main">
				<slot></slot>
			</div>
			<div class="footer">
				<slot name="footer"></slot>
			</div>
		</div>
	</div>
	`
})

---

<div id="app">
	<div class = "container">
		<div class="header">
			<h2>标题</h2>
		</div>
		<div class="main">
			<p>这是正文内容</p>
			<p>这是更多的正文内容</p>
		</div>
		<div class="footer">
			<div>底部信息</div>
		</div>
	</div>
</div>

3. 作用域插槽

• 作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素
  1.在子组件的slot标签内有自定义属性(mgs),把数据传到插槽。
  2.父组件中使用template元素，而且拥有一个scope="props"的特性，这里的props是临时变量。template(父组件)内可以通过临时变量props访问来自子组件插槽的数据msg

<div id="app">
	<child-component>
		<template scope="props">
			<p>来自父组件中的内容</p>
			<p>{{props.msg}}</p>
		</template>
	</child-component>
</div>

new Vue({
	el:"#app"
})
Vue.component('child-component',{
	template:`
		<div class="container">
			<slot msg="来自子组件的内容"></slot>
		</div>
	`
})

---

<div id="app">
	<div class="container">
		<p>来自父组件的内容</p>
		<p>来自子组件的内容</p>
	</div>
</div>