面试题：Vue作用域插槽如何进行基本的数据传递

Question

请描述在Vue中，如何使用作用域插槽将父组件的数据传递到子组件的插槽中并展示。给出具体的代码示例，包括父组件和子组件的相关代码。

Answer 1

1. 子组件代码

首先创建子组件 Child.vue，在模板中定义一个插槽，并使用 v-bind 绑定需要传递给插槽的数据。

<template>
  <div>
    <slot :data="childData">
      <!-- 这是插槽的默认内容，如果父组件没有传入内容，会显示这里 -->
      默认内容
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: {
        message: '来自子组件的数据'
      }
    };
  }
};
</script>

2. 父组件代码

然后在父组件 Parent.vue 中使用子组件，并通过作用域插槽接收子组件传递的数据并展示。

<template>
  <div>
    <Child>
      <template v-slot:default="slotProps">
        <p>{{ slotProps.data.message }}</p>
      </template>
    </Child>
  </div>
</template>

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

在上述代码中，子组件通过 :data="childData" 将 childData 数据绑定到插槽上，父组件通过 v-slot:default="slotProps" 接收这些数据，slotProps 是一个对象，包含了子组件传递过来的数据，在这里通过 slotProps.data.message 展示数据。v-slot:default 中的 default 表示默认插槽，如果子组件有具名插槽，这里的名字需要与具名插槽的名字一致。