属性或方法...未在实例上定义，但在渲染期间引用

Question

我正在编写一个与事件一起使用的示例 Vue 组件。

我通过渲染 index.html 得到此错误：“属性或方法“onCouponApplied”未在实例上定义，但在控制台中的渲染期间被引用”。

index.html

<div id="root">
    <coupon @applied="onCouponApplied"></coupon>
</div>

以下是 Vue 代码

main.js

window.Event = new Vue();

Vue.component('coupon',{
    template: `<input placeholder="Enter" @blur="onCouponApplied">`,
    methods:{
        onCouponApplied() {Event.$emit('applied');}
    }
})

new Vue({
    el:"#root",
    created() {
        Event.$on('applied', ()=>alert('Received'));
    },
});

Answer 1

首先，Vue模板代码不属于index.html：<div id="root"></div>

然后，您将事件总线和普通的自定义 Vue 事件混为一谈。 要么：

window.Event = new Vue();

Vue.component("coupon", {
  template: `<input placeholder="Enter" @blur="onCouponApplied">`,
  methods: {
    onCouponApplied() {
      Event.$emit("applied");
    }
  }
});

new Vue({
  el: "#app",
  template: `<coupon></coupon>`,
  created() {
    Event.$on("applied", () => alert("Received"));
  },
});

或：

Vue.component("coupon", {
  template: `<input placeholder="Enter" @blur="$emit('applied')">`,
});

new Vue({
  el: "#app",
  template: `<coupon @applied="onCouponApplied"></coupon>`,
  methods: {
    onCouponApplied() {
      alert("Received");
    }
  }
});