vue3 作用域插槽传递函数

Vue3中的作用域插槽可以通过传递函数来实现。具体来说，可以在父组件中定义一个函数，然后将这个函数作为参数传递给子组件的作用域插槽。在子组件中，可以通过调用这个函数并传递参数来将数据传递回父组件。

例如，父组件中定义了一个函数handleClick，然后将这个函数作为参数传递给子组件的作用域插槽：

<template>
  <child-component v-slot="{ handleClick }">
    <button @click="handleClick('hello')">Click me</button>
  </child-component>
</template>

在子组件中，可以通过调用这个函数并传递参数来将数据传递回父组件：

<template>
  <div>
    <slot :handleClick="handleClick"></slot>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  setup() {
    const handleClick = (message) => {
      console.log(message);
    };

    return {
      handleClick,
    };
  },
};
</script>

这样，当用户点击按钮时，子组件中的handleClick函数会被调用，并将参数传递回父组件。父组件可以在自己的作用域中使用这个参数来进行相应的处理。