作用域插槽父子组件互相传值

作用域插槽是一种在父组件中定义模板，在子组件中使用并且可以访问父组件的数据的方法。在使用作用域插槽时，需要在父组件中使用 v-slot 指令来定义插槽的名称，并且在子组件中使用 slot-scope 属性来访问父组件的数据。

下面是一个示例代码，演示了父子组件之间使用作用域插槽传值的方法：

父组件：

<template>
  <div>
    <child-component v-slot:default="slotProps">
      {{ slotProps.parentData }}
    </child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'Hello from parent',
    };
  },
};
</script>

子组件：

<template>
  <div>
    <slot :parentData="childData"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: 'Hello from child',
    };
  },
};
</script>

在这个示例中，父组件中使用了 v-slot 指令来定义一个名为 default 的插槽，并且在子组件中使用了 slot-scope 属性来访问父组件传递过来的数据。父组件中的 parentData 数据被传递到了子组件中的 childData 中，并且在插槽内部被访问和渲染出来了。