vue2.0 插槽

使用场景

如开发一个组件，里面一些子元素希望是有调用着来定义，可以使用slot

一：没有slot

<child>没有插槽slot我不展示</child>
Vue.component('child',{
    template:`<div>child</div>`
})

结果：

注释：在父组件中调用子组件时给子组件添加插槽内容，如果子组件里不包含<slot></slot>元素，则添加的插槽内容会被抛弃

二：默认插槽

<child1></child1>
<child1>我是默认插槽</child1>
<child1>{{parentMsg}}</child1>
Vue.component('child1',{
    template:`<div>child1<slot>哈哈哈哈</slot></div>`
    })

结果：

注释：

1. 没有设置子组件插槽内容，则会显示子组件<slot></slot>中的内容
2. 设置了子组件插槽内容，则插槽内容会替代<slot></slot>中的内容
3. 子组件插槽内容是在父组件调用时设置，默认的作用域是父组件，因此可以访问父组件的值，这点个人认为类似父组件给子组件传值props，但是props主要传递值，插槽可以传递DOM

三：具名插槽

 <child2>
    <template slot="aaa">
        我是aaa具名插槽
    </template>
    <template slot="bbb">
        我是bbb具名插槽
    </template>
    <!-- V2.6.0之后的写法缩写 -->
    <template #ccc>
        我是ccc具名插槽
    </template>
</child2>
Vue.component('child2',{
    template:`<div>child2
        <slot name='aaa'></slot>
        <slot name='bbb'></slot>
        <slot name='ccc'></slot>
        </div>`
})

四：作用域插槽

<child3>
    <!-- V2.6.0之前的写法 -->
    <template slot-scope="scope">
        {{scope}}
    </template>
</child3>
Vue.component('child3',{
    template:`<div>child3
         <slot :msg="msg"  text="哈哈哈"></slot>
        </div>`,
    data(){
       return{
           msg:"子组件的参数"
       }
    }
})

结果：

 <child4 >
    <!-- V2.6.0之后的写法 -->
    <template v-slot="msg">
        <li>{{msg.msg.name}}{{msg.msg.age}}岁</li>
    </template>
</child4>
 Vue.component('child4',{
    template:`<div>child4
        <ul>
            <slot v-for="item in childMsg" :msg=item></slot>
        </ul>
        </div>`,
    data(){
       return{
           childMsg:[
               {
                   name:"张三",
                   age:18
               },
               {
                    name:"李四",
                   age:19
               }
           ]
       }
    }
})

结果：
注释：
作用域插槽与普通插槽区别：[作用域插槽]父组件插槽的内容能访问子组件传的数据[普通插槽]则不行

源码地址： https://github.com/shangliaoy...