Vue插槽（三）作用域

为什么要使用作用域

• 子组件代码，默认插槽内容是展示"性别"

<template>
  <div>
    <div>名字: {{ user.name }}</div>
    <slot>性别: {{ user.sex }}</slot>
  </div>
</template>

<script>
export default {
  name: "child",
  data() {
    return {
      user: {
        name: "张三",
        sex: "男",
        age: 33
      }
    };
  }
};
</script>

• 父组件代码：设置插槽内容，展示用户的年龄

  <div class="hello">
    <child> 年龄：{{ user.age }} </child>
  </div>

• 展示结果

  
  

在父组件内，不能使用子组件的数据；

使用作用域插槽

• 子组件代码，把数据user绑定到```<slot>的元素上（又叫插槽 prop）

<template>
  <div>
    <div>名字: {{ user.name }}</div>
    <slot name="content" v-bind:user="user">性别: {{ user.sex }}</slot>
  </div>
</template>
<script>
export default {
  name: "child",
  data() {
    return {
      user: {
        name: "张三",
        sex: "男",
        age: 33
      }
    };
  }
};
</script>

• 父组件代码，我们使用slot-scope来接受子组件提供的插槽 prop；

  <div class="hello">
    <child>
      <template slot="content" slot-scope="slotProps">
        年龄：{{ slotProps.user.age }}
      </template>
    </child>
  </div>

• 运行结果