Vuejs模态组件无法引用方法

Question

我有一个模态对话框，它试图在 Vue 应用程序实例上使用一个方法，但出现错误

app.js:32117 [Vue warn]: Property or method "calcFees" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

应用声明

Vue.component('sale', require('./components/Sale.vue'));

const app = new Vue({
el: '#app',
data: {
    showModal: false
},
methods: {
    calcFees: function (event) {
        alert('GOOD');
    }
}
});

Sale.vue 组件暂时最小化

<template name="sale">
    <input type="text" placeholder="Sale Price" class="form-control" @blur="calcFees">
</template>

sale 组件只是简单地包含在此处的主页中

<sale v-if="showModal"></sale>

模态对话框工作正常，显示上面的文本输入，但是上面的错误显示在控制台中，并且模糊事件没有调用该方法。

似乎和组件模板有关，因为我通过直接在主刀片页面中输入文本成功测试了模糊事件。

任何想法为什么它不能以这种方式工作？我在某处看到一条评论与 <template> 有关，但没有说明如何解决。

Answer 1

组件不能直接访问其他组件或根 Vue 中声明的方法。

这段代码的问题是 calcFees 方法是在根 Vue 中声明的，但您试图从 Sale.vue 组件中调用它。

有几种方法可以完成这项工作。一种是您可以将calcFees 移动到组件中。另一个是您可以使用calcFees 中需要使用的任何内容向父级$emit 一个事件。

Sale.vue

<template name="sale">
    <input type="text" v-model="price" placeholder="Sale Price" class="form-control" @blur="onSale">
</template>

<script>
export default {
  data(){
     return {
       price: null
     }
  },
  methods: {
    onSale(){
      this.$emit('sale', this.price) 
    }
  }
}
</script>

Vue

<sale v-if="showModal" @sale="calcFees"></sale>

const app = new Vue({
  el: '#app',
  data: {
    showModal: false
  },
  methods: {
    calcFees: function (price) {
        alert(price);
    }
  }
});