vue slot插槽传值

Vue中的插槽（slot）是一种用于在组件之间传递内容的机制。通过插槽，我们可以在父组件中定义一些内容，并将其传递给子组件进行渲染。在Vue中，插槽可以用于传递任意类型的数据，包括字符串、数字、对象等。

下面是一个示例，演示了如何在Vue中使用插槽传递值：

1. 父组件中定义插槽并传递值：

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

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

export default {
  components: {
    ChildComponent
  }
}
</script>

2. 子组件中接收并渲染插槽的值：

<template>
  <div>
    <slot :value="slotValue"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slotValue: 'Hello, World!'
    };
  }
}
</script>

在上面的示例中，父组件通过`v-slot:default`指令定义了一个默认插槽，并将插槽的值绑定到了`slotProps.value`上。子组件通过`<slot>`标签接收并渲染了插槽的值。

当父组件渲染时，子组件会将插槽的值传递给父组件，并在父组件中进行渲染。如果父组件没有传递值，则会显示子组件中定义的默认值。