Vue 插槽 Slot 的数据传递

在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。要做到这一点，我们需要让子组件在渲染时将一部分数据提供给插槽。

可以像对组件传递 props 那样，向一个插槽的出口上传递数据和内容，然后再父组件里面使用 slot-scope 的方式去接收传递过来的数据，获取数据的方式有两种， 可以通过结构赋值的方式去获取，或者把所有传递过来的内容保存到一个对象中，然后再去使用。

子组件

<template>
  <div>
    <slot name="childrenContent" :user="user" :age="age"></slot>
  </div>
  <!-- 子组件 -->
</template>

<script>
export default {
data() {
    return {
        user: "子组件的内容",
        age: '18'
    }
 }
}
</script>

父组件

<template>
  <div style="margin-top: 20px;">
    <!-- 解构赋值 -->
    <p>解构赋值的方式</p>
    <children>
      <div slot="childrenContent" slot-scope="{ user }">
      
        {{ user }} 
      </div>
    </children>
    <br/>
    <!-- 保存到一个对象中 -->
    
    <p>保存到对象中</p>
    <children>
      <template slot="childrenContent" slot-scope="slotScope">
        {{ slotScope }}
      </template>
    </children>
  </div>

</template>
  
<script>
import children from "./children.vue";
export default {
  components: {
    children,
  },
};
</script>

显示结果

这个功能一般常用在日历控件上，获取当前渲染的某天，然后对日期增加特殊的标识等功能上，在日常开发中也可以使用上