Vue中的作用域插槽

---

前言

插槽就是父组件往子组件中插入一些内容。 有三种方式，默认插槽，具名插槽，作用域插槽。
1.默认插槽就是把父组件中的数据，显示在子组件中，子组件通过一个slot插槽标签显示父组件中的数据 2.具名插槽是在父组件中通过slot属性，给插槽命名，在子组件中通过slot标签，根据定义好的名字填充到对应的位置。

这两种都是大家经常见到的，也是经常使用的，下面我们就具体讲一讲作用域插槽。

---

一、作用域插槽的概念

作用域插槽是带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过slot-scope来接受数据。

二、代码详解

光看概念，估计还是有点懵，下面直接上代码：


这是子组件中的代码：

//重点记住作用域插槽就是带数据的插槽，带数据的插槽，带数据的插槽。
//携带数据的，就是子组件中的<slot>
//子组件中携带数据，父组件中接受数据
<template>
  <div class="">
    <slot :user="user"></slot> //:user="user"  ,就是插槽所携带的数据
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        name: "姚胖胖",
        age: 20,
      },
    };
  },
};
</script>

这是父组件中的代码：

//在父组件中通过slot-scope来接受子组件提供参数
<template>
  <div class="father">
//`````此处重点
    <child>
      <template slot-scope="{ user }"> //注意，这里使用了解构赋值
        <div>{{user}}</div>
        <div>{{user.name}}</div>
        <div>{{user.age}}</div>
      </template>
    </child>
//`````此处重点
  </div>
</template>

<script>
import Child from "/src/components/Child";
export default {
  data() {
    return {};
  },
 components: {
    Child,
  },
};
</script>

这是页面中打印出来的数据：