第二十三节:带你梳理Vue2:Vue插槽的认识和基本使用

前言:
通过上一节的学习,我们知道了如何将数据从父组件中传递到子组件中, 除了除了将数据作为props传入到组件中,Vue还允许传入HTML,

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。

至于<slot>是什么我们一步一步往下看.

先来看一个需求

首先你想创建一个通用性的按钮, 按钮的内容是使用的时候来决定,我们可能会通过一个属性来设置按钮的文本,例如

<div id="app">
     <!-- 使用组件 -->
     <my-button text="按钮"></my-button>
     <my-button text="提交"></my-button>
</div>


<script>
    //  组件选项对象
    let MyButton = {
        props:["text"],
        template: `<button>{{ text }}</button>`,
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyButton,
        }
    })
  
</script>

这个时候在调用组件的时候,传入不同的text属性值, 按钮就会有不同值

这样自然能满足我们的需求, 不过下面这种组件写法会显得更加自然

<div id="app">
     <!-- 使用组件 -->
     <my-button>按钮</my-button>
     <my-button>提交</my-button>
</div>

如果想让组件嵌套的内容显示在子组件模板中, 就需要使用slot插槽

真正了解插槽之前,我们先认识一下编译作用域

1. 编译作用域

通过前面的学习,我们都知道了,父子组件是有不同的模板和各自独立的作用域, 每一个组件在实例化的时候作用域都是孤立的,

那么如此一来,当在父组件中使用子组件时,子组件中嵌套的内容是在哪个作用域里编译呢?

如下示例:

<div id="app">
     <!-- 使用组件 -->
     <my-child>
        {{ msg }}
     </my-child>
</div>

<script>
    //  组件选项对象
    let MyChild = {
        template: `<button>按钮</button>`,
        data(){
            return {
                msg: "hello"
            }
        }
    };

   
    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            msg:"你好"
        },
        components: {
            MyChild,
        }
    })
  
</script>

此时组件中嵌套的msg 究竟是在父组件中的作用域中编译还是在子组件作用域编译呢?这涉及到msg使用的是父组件的数据还是子组件的数据

答案是父组件。组件作用域简单地说是：

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

所以一个比较常见的错误,就是在父组件模板内将一个指令绑定到子组件内部的属性/方法

例如:

<div id="app">
     <!-- 使用组件 -->
     <my-child v-show="isShow"></my-child>
</div>


<script>
    //  组件选项对象
    let MyChild = {
        template: `<button>按钮</button>`,
        data(){
            return {
                isShow: false
            }
        }
    };

   
    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyChild,
        }
    })
  
</script>

isShow是子组件中的数据, 这样会报错, 因为父组件模板并不能感知到子组件的状态,

如果需要绑定到子组件作用域内的数据,就可以将指令绑定在子组件的根节点上,

如下正确的写法

<div id="app">
     <!-- 使用组件 -->
     <my-child></my-child>
</div>


<script>
    //  组件选项对象
    let MyChild = {
        template: `<button  v-show="isShow">按钮</button>`,
        data(){
            return {
                isShow: false
            }
        }
    };

   
    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        components: {
            MyChild,
        }
    })
  
</script>

现在我们对于编译作用域就有了一定的了解,

那么回到我们当初的问题, 在父组件模板中使用子组件时在子组件中嵌套的内容是属于父组件的编译,但是我有希望这个内容能在子组件中使用,我们就需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 。

2. 插槽的基本使用

原来在组件里面是不能写内容的,因为会被模板替换的,现在有了插槽以后,我们就可以在组件里定制内容

2.1 插入基本的文本内容

还是刚才的实例,为了能让我们在子组件中嵌套的文本在子组件模板中使用,我们就需要在子组件模板中使用插槽

<div id="app">
    <!-- 使用组件 -->
    <my-child >
        按钮
    </my-child>
    <my-child >
        {{ text }}
    </my-child>
</div>

<script>

    //  组件选项对象
    let MyChild = {
        template: `<button><slot><slot></button>`
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            text: "注册"
        },
        components: {
            MyChild,
        }
    })

</script>

使用插槽的结果

这样我们就可以很方便的在父组件中,通过slot插槽像子组件模板中分发内容,

再次思考, 除了可以插入文本内容, 那么是不是也可以插入DOM标签呢?

那么接着往下看.

2.2 插入DOM标签

我们除了可以在插槽上插入普通的文本,我们还可以在插槽上插入DOM标签
示例代码如下:

<div id="app">
    <mydio>
        <h1>是否删除?</h1>
    </mydio>
    <mydio>
        <span>是否确认?</span>
    </mydio>
</div>

<!--模板中只有一个根元素,插槽可以通过元素的属性定制模板-->
<template id="myalert">
    <div>
        <slot></slot>
    </div>
</template>

<script>
    const mydio = {
        template: '#myalert',
    };

    var vm = new Vue({   // 根实例
        el: '#app',
        components: {
            mydio
        },
    });
</script>

显示结果

通过结果,我们成功的将DOM元素插入了子组件模板中.

那么slot插槽还有哪些秘密呢?接着看

3. 插槽默认内容

但是不是每一次使用子组件的时候,都会插入内容, 如果没有插入内容,插槽的位置将什么都不会显示,

如果我们需要在使用子组件时未插入内容时. 显示一段默认的内容,我们就可以将默认的内容嵌套在slot 标签中,

这就是插槽的备用内容, 备用内容在子组件的作用域内编译. 并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

同样使用按钮的示例:

<div id="app">
    <!-- 使用组件 -->
    <my-child ></my-child>
    <my-child >
        {{ text }}
    </my-child>
</div>
<script>

    //  组件选项对象
    let MyChild = {
        template: `<button><slot>默认内容</slot></button>`
    };

    //  实例中注册组件
    const vm = new Vue({
        el:"#app",
        data:{
            text: "注册"
        },
        components: {
            MyChild,
        }
    })

</script>

显示结果

这样就算在使用子组件没有分发内容, 页面的按钮也不会是空的