vue3 父组件通过插槽传值给子组件

在Vue 3中，父组件可以通过插槽（slots）将数据传递给子组件。这是Vue中的一个功能，允许开发者在父组件中定义内容，然后在子组件的模板中显示这些内容，并且可以在插槽中传递数据。具体操作如下：

1. 父组件中定义插槽，并在插槽中传递数据：

<!-- 父组件模板 -->
<template>
  <ChildComponent>
    <template v-slot:default="{ data }">
      <!-- 这里的data是你要传递给子组件的数据 -->
      <!-- 可以通过插槽插值的方式传递数据 -->
      {{ data }}
    </template>
  </ChildComponent>
</template>

2. 子组件中接收插槽传入的数据：

<!-- 子组件模板 -->
<template>
  <div>
    <!-- 这里的slot-scope="data"用于接收父组件传递的数据 -->
    <slot :data="someData">
      <!-- 默认插槽内容 -->
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      someData: '这是从子组件获取的数据'
    }
  }
}
</script>

通过上述步骤，父组件就可以在使用插槽时将数据传递给子组件。子组件通过`slot-scope`属性接收这些数据，并可以在其模板中使用这些数据。