Vue子组件select值变更后触发父组件指定函数的实现问题

你当前子组件已经通过$emit正确抛出了currencyType自定义事件，只需调整父组件的事件绑定逻辑即可，两种常用实现方式： #

方式一：模板内直接调用（适合简单逻辑） #

直接在@currencyType绑定的回调中同时执行赋值和myFunction调用，修改后父组件模板代码如下：

<app-select-coin
  @coin="body.value = $event"
  @currencyType="(val) => { 
    body.currencyType = val; 
    myFunction(); 
  }"
  :data="body"
/>

如果myFunction需要用到子组件传递过来的选中值，直接改成myFunction(val)即可。 #

方式二：封装独立处理函数（适合复杂逻辑、易维护） #

先在父组件的methods中新增事件处理函数，把赋值、调用方法的逻辑统一封装：

methods :{
   myFunction() {
      // 原有逻辑
   },
   // 新增currencyType事件处理函数
   handleCurrencyChange(val) {
     this.body.currencyType = val
     // 调用目标方法
     this.myFunction()
   }
}

再修改父组件模板的事件绑定：

<app-select-coin
  @coin="body.value = $event"
  @currencyType="handleCurrencyChange"
  :data="body"
/>

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