给插槽（slot）绑定事件·

给插槽(slot)绑定事件

背景： 现在有一个组件，它里面有一个插槽，需要实现不管往插槽里面添加什么，都要能让他点击之后可以让组件里面的数据的值+1

实现思路 可以运用 vue 的作用域插槽

1. 先将需要点击之后运行的方法通过作用域插槽传递给调用该组件的页面

<template>
  <div>
    <h1>{{ num }}</h1>
    <slot :add-num="addNum">
      <button @click="addNum">add</button>
    </slot>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";

const num = ref(10);
function addNum() {
  num.value++;
}
</script>

2. 在调用组件的页面拿到该方法并绑定该方法

<template>
  <add>
    <template v-slot="{ addNum }">
      <h1 @click="addNum">点击我就可以啦</h1>
    </template>
  </add>
</template>

<script setup>
import Add from "./components/add.vue";
</script>

结果： 点击该h1标签时组件中的num也会+1

这样就可以实现不管插槽中传递什么东西，都可以来执行某个事件方法