vue 插槽如何传值

Vue 中的插槽（Slots）是一种用于让组件接收并显示动态内容的功能。它们主要用于父子组件间的通信，特别是当需要将数据从父组件传递到子组件的模板中时。通过插槽，你可以像 `<slot>` 标签一样，在父组件中定义一个占位区域，然后在子组件内部提供一个或多个 `v-slot` 或者直接插入 HTML 来填充这个占位。

**传值示例**：

1. **简单属性绑定**:
父组件:

   <template>
     <my-component>
       <span slot="value">这是默认值</span>
     </my-component>
   </template>

   <!-- my-component.vue -->
   <template>
     <div>
       <slot name="value" :value="parentValue"></slot>
     </div>
   </template>

子组件会接收到父组件传递的 `parentValue` 属性，并将其显示在 `name="value"` 的插槽内。

2. **自定义事件**:
父组件可以触发一个事件并传递数据给子组件：

   <template>
     <button @click="setCustomSlotValue('custom message')">点击设置插槽值</button>
     <my-component>
       <p v-slot="{ value }">{{ value }}</p>
     </my-component>
   </template>

   <!-- my-component.vue -->
   methods: {
     setCustomSlotValue(value) {
       this.$emit('update:slot-value', value);
     }
   }

当父组件点击按钮时，通过 `$emit` 触发一个名为 `update:slot-value` 的自定义事件，并传递新的值给子组件。

**