Vue项目出现两个开发工具警告，请求解决方案

嘿，我来帮你搞定这两个警告，咱们先搞清楚为啥会出现这些问题：

警告原因分析 #

1. 第一个警告：你在index.html的<coupon @applied="OnCouponApplied"></coupon>里，给子组件绑定了applied事件，指定了处理器OnCouponApplied，但你的根Vue实例里根本没定义这个方法，Vue渲染时找不到它，就抛出了警告。
2. 第二个警告：因为OnCouponApplied方法不存在，Vue就认为applied事件的处理器是undefined，自然就报了这个错。

下面给你两种可行的解决方案，你可以根据自己的需求选：

方案一：修正Event Bus的用法（沿用你当前的思路） #

如果你想继续用全局Event Bus来传递事件，只需要做两个小修改：

• 先删掉index.html里<coupon>标签上的@applied="OnCouponApplied"，因为你已经用Event Bus传递事件了，这里的绑定是多余的，反而会导致警告。
• 然后调整根组件的created钩子，如果你想让页面显示applied文本，记得更新couponApplied的数据：

new Vue({
  el:'#root',
  data:{
    couponApplied:false
  },
  created(){
    Event.$on('applied',()=>{
      this.couponApplied = true; // 加上这行，更新状态
      alert('handle!');
    });
  }
});

方案二：使用Vue原生自定义事件（更推荐） #

这种方式更符合Vue组件通信的规范，不需要全局Event Bus，直接让子组件触发自定义事件：

1. 修改main.js里的coupon组件，把Event Bus的$emit换成Vue组件原生的$emit：

Vue.component('coupon',{
  name:'coupon',
  template:'<input placeholder="enter your code" @blur="OnCouponApplied">',
  methods:{
    OnCouponApplied(){
      this.$emit('applied'); // 触发自定义事件
    }
  }
});

2. 在根Vue实例里定义OnCouponApplied方法，这样模板里的@applied绑定就有对应的处理器了：

new Vue({
  el:'#root',
  data:{
    couponApplied:false
  },
  methods:{
    OnCouponApplied(){
      this.couponApplied = true;
      alert('handle!');
    }
  }
});

这两种方案都能彻底解决那两个警告，而且功能和你预期的一致～

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