关于作用域插槽slot(面试高频)

 此文章仅讨论关于作用域插槽，对于插槽不了解的小伙伴自行百度嗷。

关于作用域：

某地有A B两个区

A区只能使用A区的设施，B区只能使用B区的设施。

两区都不能到对方的地盘，更不要说使用设施。

(把A B两区想象为两个组件，设施想象为数据)

这就是关于作用域的一个概念。

---

普通插槽：让父组件定义的内容(文本，数据，标签等)，在子组件中被渲染。

作用域插槽：让父组件拿到子组件的数据，并且可以在子组件中渲染。

---

下面用两个组件举例：

父组件theFather:

<template>
    <div class="f_div">
        <span>我是父组件</span>
        <theSon>
            <span style="background: green;">我来自父组件</span>
        </theSon>
    </div>
</template>

<script>
import theSon from './TheSon.vue';
export default {
    components: {
        theSon,
    }
}
</script>

子组件theSon：

<template>
    <div class="s_div">       
        <span>我是子组件</span>
        <slot></slot>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"儿子的秘密"
        }  
    }
}
</script>

1.首先，我们可以得到这样一个效果：

2.接下来，我们联想一个场景。父亲想要控制儿子说出小秘密。当然，这需要儿子的配合。

也就是说，在子组件中把数据绑定在slot标签中，传给父组件。

我们把theSon的数据msg绑定在slot标签上，将其传递给父组件。

代码如下：

<template>
    <div class="s_div">       
        <span>我是子组件</span>
        <slot :message="msg"></slot>
        <!-- 我们把数据绑定在slot上 格式:key=value -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"儿子的秘密"
        }  
    }
}
</script>

对应的 我们也要修改父组件的代码：

<template>
    <div class="f_div">
        <span>我是父组件</span>
        <theSon>
            <template v-slot:default="slotdata">
                <!-- 使用v-slot:default="ObjectName" 接受这个值-->
                <span style="background: green;">我来自父组件</span>
                <!--对应的 我们需要把原先的内容放到template标签里-->
                {{ slotdata.message }} 
                <!-- 使用子组件给我们的数据 -->
            </template>
        </theSon>
    </div>
</template>

<script>
import theSon from './TheSon.vue';
export default {
    components: {
        theSon,
    }
}
</script>

tips：我们也可以在子组件slot中设置name属性，然后用#name简写 代替v-slot:default。

这里有一个坑！！！

子组件传递的数据msg绑定在message上，但是父组件并没有声明接受这个message

而是将message放在一个对象中(代码中用ObjectName替代)。

所以我们在调用数据时使用了slotdata.message来调用这个数据。

当然，我们也可以用解构的语法来使用数据，从而避开这个坑。如下：

<template>
    <div class="f_div">
        <span>我是父组件</span>
        <theSon>
            <template v-slot:default="{message}">
                <!-- 1.使用template标签包裹需要在插槽显示的内容 -->
                <!-- 2.使用v-slot:default="Object" 接受这个值-->
                <span style="background: green;">我来自父组件</span>
                <!--3.对应的，我们需要把原先的内容放到template标签里-->
                {{ message }} 
                <!-- 4.使用子组件给我们的数据 -->
            </template>
        </theSon>
    </div>
</template>

只需要将message用{}包裹，便可以在下方直接使用。

效果都一样，如下：

平时我们父组件给子组件传数据一般会用prop，这里的原理跟prop类似，只不过现在是子传父。

如下：

相比普通的插槽，这里多了一步就是获取子组件数据。

我们可以把作用域插槽分离开，先获取子组件数据，让父组件也有这个数据。然后就跟普通插槽一样，父组件将内容显示在子组件中。

关于函数传递：

这里还可以传递子组件的函数，如下：

 子组件新增test方法，并传递给父组件

<template>
    <div class="s_div">       
        <span>我是子组件</span>
        <slot name="son_slot" :message="msg" :test="test"></slot>
        <!-- 我们把数据绑定在slot上 格式:key=value -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:"儿子的秘密"
        }  
    },
    methods:{
        test(){
            console.log(this.msg)
        }
    }
}
</script>

父组件接收该函数，并在button标签调用。

<template>
    <div class="f_div">
        <span>我是父组件</span>
        <theSon>
            <template #son_slot="{message,test}">
                <!-- 1.使用template标签包裹需要在插槽显示的内容 -->
                <!-- 2.使用v-slot:default="Object" 接受这个值-->
                <span style="background: green;">我来自父组件</span>
                <!--3.对应的，我们需要把原先的内容放到template标签里-->
                {{ message }} 
                <button @click="test">按钮</button>
                <!-- 4.使用子组件给我们的数据 -->
            </template>
        </theSon>
    </div>
</template>

每次点击按钮，就会触发一次函数，这里点击两次，触发了两次。

效果如下：

 tips:这里写的时候有一个小坑 暂时不清楚是什么原因。(注意下面红色字体)

如果子组件传递函数写成<slot name="son_slot" :message="msg" :test="test()"></slot>

父组件就会在初始渲染时，调用一次该函数。且button标签的click触发函数就会失效。

也就是，父组件并没有接收到这个函数。

效果如下：

注：

valid handler for event "click": got undefined 表示@click="xxx"里的函数xxx未定义