组件插槽

组件插槽

插槽也是组件传值的一种方式

组件的最大特性就是重用，而用好插槽能大大提高组件的可重用能力。

通俗的来讲，插槽无非就是在子组件中挖个坑，坑里面放什么东西由父组件决定。

插槽类型有：

单个（匿名）插槽

匿名插槽一般就是使用单个插槽（因为单个插槽就一个，所以不需要指定具体的名字）

注意：子组件的slot标签中允许书写内容，当父组件不往子组件传递内容时，slot中的内容才会被展示出来。

<div id="app">
    <child>{{msg}}</child>
    <data-li v-for='iteam in data'>
        {{iteam}}
    </data-li>
</div>
<script src="./js/vue.js"></script>
<script>
    Vue.component("child", {
        template: `<div>
                儿子挖了个坑，填什么由父亲决定，比如说<slot>1111</slot>。
            </div>`,
    });
    Vue.component("data-li",{
        template: `<li>我是<slot>名字</slot>的父亲</li>`,
    })
    new Vue({
        el: "#app",
        data:{
            data:['老马','老王','张三'],
            msg:"这是插槽",
        }
    });
</script>

具名插槽

slot 元素可以用一个特殊的特性 name 来进一步配置如何分发内容。多个插槽可以有不同的名字，具名插槽将匹配内容片段中有对应 slot 特性的元素（填坑的内容会根据名字去匹配slot）。

<div id="app">
    <app-layout>
        <h2 slot="tou">我是头</h2>
        <p style="color: violet;">中新网12月14日电 (张奥林)美国总统大选日已过去月余，驴象之争下，拜登与特朗普到底谁赢了，至今尚无定论。</p>
        <p>虽然拜登本人及国际社会普遍认为拜登已胜选，但特朗普方面仍未承认败选。2020年12月14日，美国选举人团将进行投票，这或将使本次大选的结果“尘埃落定”。</p>
        <h2 slot="jiojio">我是jio</h2>
    </app-layout>
</div>
<script src="./js/vue.js"></script>
<script>
    Vue.component('app-layout',{
        template: `
            <div>
                <header>
                    <slot name="tou"></slot>
                </header>
                <main>
                    <slot></slot>
                </main>
                <footer>
                    <slot name="jiojio"></slot>
                </footer>
            </div>
        `
    })
    new Vue({
        el: "#app"
    })
</script>

作用域插槽

应用场景：

父组件对子组件的内容进行加工处理（子传父）

作用域插槽是一种特殊类型的插槽，（子）作用域插槽会绑定了一套数据，父组件可以拿这些数据来用，于是，情况就变成了这样：

样式父组件说了算，但父组件中内容可以显示子组件插槽绑定的数据。

<div id="app">
    <!-- b. 父传子 -->
    <child :username="username">
        <div slot-scope="props">
            <!-- f. 父亲接收到新的名字，调用自己的方法去处理数据 -->
            <button @click="modusername(props.newname)">
                修改用户名
            </button>
        </div>
    </child>
</div>
<script src="./js/vue.js"></script>
<script>
    Vue.component("child", {
        // c. 子接收
        props: ["username"],
        data() {
            return {
                // d. 定义新的数据
                newname: "zhangsan",
            };
        },
        // e. 将新名字传递给了父
        template: `<div>用户名：{{username}}<slot :newname="newname"></slot></div>`,
    });
    new Vue({
        el: "#app",
        data: {
            // a. 初始用户名
            username: "admin",
        },
        methods: {
            // g. 父亲更新自己的数据
            modusername: function (newname) {
                // h. 执行更新
                this.username = newname;
            },
        },
    });
</script>