如何从插槽内的元素调用插槽父组件的方法或向其触发事件？

下面是两种常用的可落地实现方式，按耦合度从低到高排序： #

方案1：作用域插槽（最推荐） #

核心逻辑是子组件通过插槽属性将内部方法暴露给父组件的插槽内容使用，不会产生强耦合。

1. 修改some-component的模板，给插槽绑定要暴露的方法：

<template>
  <slot :someMethod="someMethod" />
</template>

<script>
export default {
  methods: {
    someMethod() {
      // Does something
    }
  }
}
</script>

2. 父组件使用作用域插槽接收暴露的方法，绑定到按钮的点击事件上：

<template>
  <!-- 基础写法 -->
  <some-component v-slot="slotProps">
    <button @click="slotProps.someMethod">Hello!</button>
  </some-component>

  <!-- 解构简写（只需要单个方法时用） -->
  <some-component v-slot="{ someMethod }">
    <button @click="someMethod">Hello!</button>
  </some-component>
</template>

方案2：自定义事件监听 #

核心逻辑是插槽内的元素触发自定义事件，子组件监听对应事件后调用内部方法，适合多个插槽元素都需要触发同个方法的场景。

1. 修改some-component，给根元素添加自定义事件监听：

<template>
  <div @trigger-some-method="someMethod">
    <slot />
  </div>
</template>

<script>
export default {
  methods: {
    someMethod() {
      // Does something
    }
  }
}
</script>

2. 父组件插槽内的按钮点击时触发对应自定义事件：

<template>
  <some-component>
    <button @click="$emit('trigger-some-method')">Hello!</button>
  </some-component>
</template>

注意：该方案需要保证自定义事件冒泡路径不被阻断，且事件名要和子组件监听的名称完全一致。

不推荐方案：直接访问父组件实例 #

你也可以直接在按钮的点击事件里写@click="$parent.someMethod()"，但该方案强绑定父子组件的层级关系，只要组件结构调整就会失效，除非是临时测试场景否则不建议使用。

内容的提问来源于stack exchange，提问作者wolf