vue的插槽

最简单的使用

    <div id="father">
        <zyl-mew>12312</zyl-mew>
    </div>
    <script>
        Vue.component('zyl-mew',{
            template:`
                <div>
                    <slot></slot>
                </div>
            `
        })

        let vm=new Vue({
            el:"#father"
        })
    </script>

可以看到通过slot占位然后将自定义标签里面的内容获取到
举一反三：我们也可以通过在data属性里面定义属性，再通过插值表达式插入到自定义标签上，此时slot依然可以获取到数据。

后备内容

当插槽对应的位置没有内容时，此时定义在slot标签里面的内容会显示出来

    <div id="father">
        <zyl-mew></zyl-mew>
    </div>
    <script>
        Vue.component('zyl-mew',{
            template:`
                <div>
                    <slot>submit</slot>
                </div>
            `
        })

        let vm=new Vue({
            el:"#father"
        })
    </script>

高级应用：具名插槽

具名插槽，就是给这个插槽起个名字，然后通过template绑定对应的插槽，然后对应template里面的内容就传个对应的slot了。

下面的 #one=v-slot:

默认插槽：没有name属性的slot叫默认插槽，没有对应名称的template则这些template都会去绑定默认插槽

    <div id="father">
        <zyl-mew>
            <template v-slot:one>
                <h1>{{ msg[0] }}</h1>
            </template>
            <template #two>
                <h2>{{ msg[1] }}</h2>
            </template>
            <template #three>
                <h3>{{ msg[2] }}</h3>
            </template>
            <template>
                <h4>{{ msg[3] }}</h4>
            </template>
            <template>
                <h4>{{ msg[4] }}</h4>
            </template>
        </zyl-mew>
    </div>
    <script>
        Vue.component('zyl-mew',{
            template:`
                <div>
                    <header>
                        <slot name="one">
                            
                        </slot>
                    </header>
                    <main>
                        <slot name="two">
                        </slot>
                    </main>
                    <footer>
                        <slot name="three">
                        </slot>
                    </footer>
                    <side>
                        <slot>
                        </slot>
                    </side>
                </div>
            `
        })

        let vm=new Vue({
            el:"#father",
            data:{
                msg:['one','two','three','blank','blank2']
            }
        })
    </script>
    </script>

插槽的别名

<template v-slot:hc="slotuser"></template>

<slot v-bind:user="user" name="hc"></slot>

可以通过：来创建一个别名

结构插槽

插槽也可以用es6中的结构

<div id="father">
        <zyl-mew>
        //将msg中的第一项结构出来，赋值给a
            <template #one="{ a=msg[0] }"> 
                <h1>{{ a }}</h1>
            </template>
        </zyl-mew>
    </div>
    <script>
        Vue.component('zyl-mew',{
            template:`
               <div>
                    <slot name="one"></slot>
               </div>
            `
        })

        let vm=new Vue({
            el:"#father",
            data:{
                msg:[{a:1},{b:2}]
            }
        })
    </script>

动态插槽名

    <div id="father">
        <zyl-mew>
        //此处通过data里面的属性动态给template添加插槽名
            <template #[dynamic]="{ a=msg[0] }">
                <h1>{{ a }}</h1>
            </template>
        </zyl-mew>
    </div>
    <script>
        Vue.component('zyl-mew',{
            template:`
               <div>
                    <slot name="abc"></slot>
               </div>
            `
        })

        let vm=new Vue({
            el:"#father",
            data:{
                dynamic:"abc",
                msg:[{a:1},{b:2}]
            }
        })
    </script>