笔记：Vue插槽

插槽：内置组件，<slot>元素是承载分发内容的出口。

匿名插槽：

子组件：（定义一个全局组件Vbtn    在当前例子中，该组件Vbtn为子组件，在这里用props选项设置属性值type，运用组件中的通信 子组件-->父组件传值）

<style>
    /*default和样式1和样式2都是完全不一样的样式*/
    .default{
        ......
    }

    .样式1{
        ......
    }

    .样式2{
        ......
    }
</style>

<script>
    //定义一个全局组件Vbtn    在当前例子中，该组件Vbtn为子组件
    Vue.component('Vbtn',{
            template:'
                      <button class="default" :class="type">
                            <slot>按钮</slot>
                      </button>
                     ',
            //在这里用props选项设置属性值type，运用组件中的通信 子组件-->父组件传值
            //运用子组件-->父组件传值这一特点，可以通过:class="type"对在父组件传过来的样式类名值进行渲染
            props:['type']
    })
</script>

父组件（此组件Vcontent在本例中为父组件）：

<script>
    //定义一个局部组件Vcontent，该组件在本例中为父组件
    var Vcontent={
            template:'
                      <div>
                        <Vbtn type="样式1">登录</Vbtn>
                        <Vbtn type="样式2">注册</Vbtn>
                      </div>
                     '
    }
</script>

 

 

具名插槽：

1.在子组件中定义插槽，并且给个名字。

2.在父组件中注册子组件（看子组件是局部组件还是全局组件），并在某个需要使用子组件的某个插槽添加slot属性。

子组件：

<script>
    //定义一个全局子组件myLi作为具名插槽
    Vue.component('myLi',{
        template:'
                  <li>
                        <slot name="one'>这是one的插槽位置</slot>
                        <slot name="two'>这是two的插槽位置</slot>
                        <slot name="three'>这是three的插槽位置</slot>
                  <li>
                 ',
    })
</script>

父组件：

<script>
    //定义一个局部父组件App
    var App={
        template:'
                  <div>
                    <ul>
                      <myLi>
                        <h1 slot="one">我要放在具名插槽one中使用</h1>
                        <h2 slot="two">我要放在具名插槽two中使用</h2>
                        <h3 slot="three">我要放在具名插槽three中使用</h3>
                      </myLi>
                    </ul>
                  </div>
                  ',
    }
</script>

总结：按照我自己的个人理解，上面的匿名插槽比具名插槽好用。上面的匿名插槽只需要用v-bind: 'type'来绑定类名值来改变样式即可，不需要像具名插槽一般定义好几个slot标签再在通过在父组件中用name="插槽名字"来进行插入，这样会使代码显得有些臃肿把，但也要看具体情况来进行定义吧。