vue3 插槽的传值与取值

Vue3 中使用插槽传递数据需要使用 `v-slot` 指令和 `slotProps` 对象。具体步骤如下：

1. 在父组件中定义插槽，并使用 `v-bind` 绑定需要传递的数据：

   <template>
     <child-component v-slot="{ data }">
       {{ data }}
     </child-component>
   </template>

2. 在子组件中定义插槽，并使用 `slotProps` 对象接收传递的数据：

   <template>
     <slot :data="value"></slot>
   </template>

   <script>
   export default {
     data() {
       return {
         value: 'hello world'
       }
     },
     mounted() {
       // 通过 $emit 触发父组件的事件，传递数据
       this.$emit('change', 'new value')
     }
   }
   </script>

3. 在父组件中监听子组件的事件，并使用 `$event` 获取传递的数据：

   <template>
     <child-component @change="handleChange">
       <template v-slot="{ data }">
         {{ data }}
       </template>
     </child-component>
   </template>

   <script>
   export default {
     methods: {
       handleChange(value) {
         console.log(value) // 输出 'new value'
       }
     }
   }
   </script>

通过以上三个步骤，就可以在 Vue3 中使用插槽传递数据了。