Vue中父组件触发子组件带参数函数的实现方法及emit事件失效问题排查

一、如何调用子组件的函数并传递数据？ #

你一开始写的 <Child @emit="seachButton('1')" 是不可行的，因为 @ 指令是用来监听子组件触发的自定义事件，而不是直接调用子组件的方法。要调用子组件的函数并传参，通常有两种常用方式：

方式1：通过 ref 主动调用子组件方法 #

这是最直接的方式，适合父组件主动触发子组件逻辑的场景：

1. 父组件中给子组件添加 ref 属性：

<Child ref="myChild" />

2. 在父组件的方法里，通过 $refs 调用子组件的 searchButton 方法并传参：

methods: {
  triggerChildSearch(type) {
    // 调用子组件的searchButton方法，传入类型参数
    this.$refs.myChild.searchButton(type);
  }
}

比如你想触发类型为'1'的搜索，直接调用 this.triggerChildSearch('1') 即可。

方式2：通过自定义事件 + 父组件传参（子组件触发场景） #

如果是子组件触发某个动作后，需要父组件传递类型参数给子组件的方法，可以这样做：

1. 子组件触发自定义事件，通知父组件：

// 子组件Child.vue
methods: {
  handleButtonClick() {
    // 触发自定义事件，让父组件响应
    this.$emit('need-search');
  }
}

2. 父组件监听该事件，并调用子组件方法传参：

<!-- 父组件 -->
<Child ref="myChild" @need-search="() => $refs.myChild.searchButton('1')" />

或者在父组件方法里统一处理：

// 父组件methods
handleNeedSearch() {
  this.$refs.myChild.searchButton('1');
}

然后模板里写 <Child @need-search="handleNeedSearch" />

二、为什么你的示例无法正常工作？ #

看你提供的父组件和子组件代码，核心问题是自定义事件名不匹配：

• 子组件里触发的事件是 this.$emit('click')
• 但父组件里监听的是 @onClick="onClick1" 和 @onClick="onClick2"

Vue 中自定义事件名是大小写不敏感的（HTML属性名会自动转为小写），且你子组件emit的是click，父组件却监听onClick，两者完全不匹配，所以点击子组件按钮时，父组件的方法不会触发。

修复方案： #

把事件名统一即可，比如：

子组件修改emit的事件名：

// Child.vue
methods: {
  onClick () {
    // 改为emit 'on-click'（Vue2建议用短横线命名自定义事件）
    this.$emit('on-click');
  }
}

父组件对应监听该事件：

<!-- Parent.vue -->
<Child @on-click="onClick1"/>
<Child @on-click="onClick2"/>

另外，子组件里的 buttonText 没有定义，会导致按钮显示空白，建议在props里添加这个属性：

// Child.vue
props: {
  buttonText: {
    type: String,
    default: '按钮'
  }
}

然后父组件使用时可以传值：<Child @on-click="onClick1" button-text="按钮1"/>

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