vue基础篇- 组件详解（第七章）（二）

四、使用slot 分发内容
1、什么是sloat
当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot，这个过程叫做内容分发。

• 组件不知道它的挂载点会有什么内容。挂载点的内容是由
• 的父组件决定的。 组件很可能有它自己的模板。

props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组件也是由这3部分构成。
2、作用域

  
        {{message}}
    

这里的message就是一个slot，但是它绑定的是父组件的数据，而不是组件的数据。
父组件模板的内容是在父组件作用域内编译，子组件模板的内容是在子组件作用域内编译。

    


Vue.component('child-component', {
    template: `
子组件1
`,
});
var app = new Vue({
    el: '#app',
    data: {
        showChild: true
    }
});

这里的状态showChild绑定的是父组件的数据。
在子组件上绑定数据：

    


Vue.component('child-component', {
    template: `
子组件
`,
    data() {
        return {
            showChild: true
        }
    }
});
var app = new Vue({
    el: '#app',
});

因此，slot分发的内容，作用域是在父组件上。
3、slot 用法
单个slot
在子组件内使用特殊的元素就可以为这个组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的标签及它的内容。

    
        
分发的内容
        
更多分发的内容
    


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

        
           
如果没有父组件插入内容，我将作为默认出现。
        
    
            `,
});
var app = new Vue({
    el: '#app',
});

子组件child-component的模板内定义了一个元素，并且用一个

作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了slot，就会替换整个。

子组件内的备用内容，它的作用域是子组件本身。

具名Slot
给元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。

    
        
标题
        
正文的内容
        
更多正文的内容
        
底部信息
    


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

    

        
    
    

        
    
    

        
    
    
    `,
});
var app = new Vue({
    el: '#app',
});

子组件内声明了3个元素，其中在

内的没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将出现在这里。

如果没有指定默认的匿名slot，父组件内多余的内容都将被抛弃。

在组合使用组件时，内容分发API至关重要。
4、作用域插槽
作用域插槽是一种特殊的slot，使用一个可以复用的模板替换已渲染元素。

    
        
    


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

    
 
    `,
});
var app = new Vue({
    el: '#app',
});

子组件的模板，在元素上有一个类似props传递数据给组件的写法msg="xxx"，将数据传递到插槽。

父组件中使用了