组件插槽
单个插槽
如果咱们心愿组件标签能够像HTML标签一样设置内容，那么组件的应用灵便度会很高。
<div id="app"><p>示例内容</p><com-a>实力内容2</com-a></div>- 但平时咱们书写的组件，组件首尾标签中书写的内容会被摈弃。（下面的“实力内容2”）
咱们须要通过
<slot>进行插槽设置。Vue.component('com-a',{template:` <div> <p>示例内容</p> <slot></slot> // 插槽 </div>`})自定义组件内增加内容，替换slot标签，一般文本和标签都可设置胜利
<div id="app"><com-a> 示例内容 <span>组件主体</span></com-a></div>留神：
模板内容的渲染地位
- 以后构造模板属于父组件的视图
- 外部所以内容，代码，数据都是由父组件进行模板渲染的
- 插槽是父组件给子组件设置的，数据是父组件的数据（当然也能够应用子组件数据，通过作用域插槽前面讲）
父级组件模板的所有内容都是在父级作用域中编译执行，子组件模板的内容在子组件作用域内编译执行
<div id="app"><com-a>这里只能拜访父组件的数据{{ parValue }}</com-a></div>new Vue({data:{ parValue:'父组件数据' },components:{ComA}})var ComA={template:`<div> <p>组件A：{{ value }}</p> <slot></slot></div>`,data(){return { value:'子组件数据'}}}
- 插槽的作用是组件对以后子组件的内容进行便捷设置，内容由父组件进行设置
如果父组件并没有传入数据，咱们能够在
<slot>中为插槽设置默认值，也称为后备内容。var ComA={template:` <div> <p>组件A：</p> <slot>这是默认文本</slot> // 默认值 </div>`,data(){ return { value:'子组件数据' }}}<div id="app"><com-a></com-a> // 插槽没接管到值，显示默认值</div>具名插槽
- 如果组件中有多个地位须要设置插槽,据须要给
<slot>设置name，称为具名插槽。
子组件构造内内设置多个插槽
Vue.component('ComA',{ template:` <div> <header> <slot name="header"></slot> // 具名 </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> `})父组件应用插槽，传入数据
- template 是占位符，不显示标签
- v-slot 只能在template中设置
- 未设置具名的插槽，默认为default
- 默认
slot能够简写,所有没有被v-slot指定的插槽内容都被认为是 默认插槽内容 - 具名能够简写为
#header#footer - 具名插槽只能调配具名对应的内容，无奈显示默认内容
个别内容比拟多的插槽局部，设置为 default 模式
<com-a><template v-slot:header> // 设置 <h1>组件头部内容</h1></template><template v-slot:default> // 默认 <p>组件主体内容</p></template><template v-slot:footer> <p>组件底部内容</p></template></com-a>简写模式
<com-a><template #header> <h1>组件头部内容</h1></template><p>组件主体内容</p><template #footer> <p>组件底部内容</p></template></com-a>作用域插槽
- 插槽能够由父组件向子组件便捷内容设置，然而因为组件渲染规定，组件插槽外部只能应用父组件的数据，因为这段构造是父组件渲染的
- 如果心愿父组件插槽外部应用子组件数据的话，须要应用作用域插槽进行设置
- 作用域插槽：用于让插槽能够应用子组件的数据。
组件将须要被插槽应用的数据通过v-bind绑定给<slot>，这种用于给插槽传递数据的属性称为插槽prop。
子组件插槽绑定
// 子组件选项对象var ComA = { template:` <div> <p>组件A：</p> <slot :value="value">这是默认文本</slot> </div> `, data(){ return { value:"子组件数据" } }}父组件接收数据
- 子组件绑定数据后，父组件的插槽中须要通过v-slot接收数据。
接管的是蕴含所有插槽prop的对象（子组件能够绑定多个属性传递，都在这个对象中），能够给对象任意命名
<div id="app"><com-a> <template v-slot:default="dataObj"> {{ dataObj.value }} </template></com-a></div>如果只存在默认插槽，同时又须要接收数据，能够进行简写（非凡）
<div id="app"><com-a v-slot:default="dataObj"> {{ dataObj.value }}</com-a></div>- 再次简写，留神： 之前操作
v-slot可简写成#。 然而v-slot:default="数据"写成#=数据不能够 - 存在slot名称的时候能力用
#简化，当前情况只是接收数据，不具备名称性能 #default和v-slot均可<div id="app"><com-a v-slot="dataObj"> {{ dataObj.value }}</com-a></div><div id="app"><com-a #default="dataObj"> {{ dataObj.value }}</com-a></div>还能够通过ES6的解构操作进行数据接管。
<div id="app"><com-a #default="{ value }"> {{ value }}</com-a></div>