slot

解释：slot官网上的定义是“插槽”，又叫内容分发。

实用场景：在实际的一些情况中，子组件往往并不知道需要展示的内容，而只提供基础的交互功能，内容及时间又父组件来提供。

用法：请看以下代码

<div id="app">
    //使用包含solt标签属性的子组件
    <my-slot>
          //属性solt值需要与子组件中的slot的name值匹配
        <p name="title">{{title}}</p>
        <div name="content"></div>
    </my-slot>
</div>

//注册mt-slot组件，包含<slot>标签，且设定唯一标识
vm.component('my-slot' , {
    
    template:'<div>\
        <div class="title">\
            <slot name = "title"></slot>\
        </div>\
        <div class="content">\
            <slot name="content"></slot>\
        </div>\
    </div>'
   
});

var vm = new Vue({
    el:'#app',
    data:{
        title:"this is title",
        content:'this is content',
    },
});

编辑作用域：通过上面的基础语法，我们大概了解到slot的基本用法，我们在父组件中调用<my-slot>组件，并在<p slot="title">{{title}}</p>中绑定数据title,从结果得知此时绑定的是父组件的数据，也就是说在这种<my-slot>{{data}}</my-slot>模板情况下，父组件模板的内容在父组件作用域内编译，子组件的模板内容在子组件的作用域内编译，反之，子组件模板的内容在父组件内编译就是报错。具体情况如下

<my-slot>
    <p name="title">{{childData}}</p>  //父组件中调用子组件中的childData，这种是无效的，必须同级的才生效，切记
</my-slot>


vm.component('my-slot' , {
    
    template:'<div>\
        <div class="title">\
            <slot name = "title"></slot>\
            <p>{{childData}}</p>
        </div>\
    </div>',
    data:(){
        return {
            childData:'this is a child',
        }
    },
   
});

如果大家有需要vue全套视频的，我可以免费提供，现在网上全套的那种视频大部分都是收费的，不收费也是那种断断续续或者轻易都能理解的，希望节省大家时间，帮助到大家。加微信15670342763