javascript - Vue 2组件未调用主实例函数

好的，我“仍在”尝试制作的这个网络应用所需的时间比我预期的要长，而且我仍然对Vue 2没什么了解。

例如，我有一个在主Vue实例中呈现的组件，而我$emit在componenet中的一个函数。当然，“内部”功能有效，但“主要”功能无效：

这是组件文件PropertyHouseComponent.vue：

<template>
    <fieldset class="form-group col-md">
        <div class="form-check">
            <input
                class="form-check-input"
                type="checkbox"
                id="house"
                name="house"
                v-model="data"
                @click="callFunc">
            <label
                for="house"
                class="form-check-label"
            >House</label>
        </div>
    </fieldset>
</template>

<script>
    module.exports = {
        props: {
            value: {
                type: Boolean,
                required: false
            }
        },
        data: function() {
            return {
                data: false
            }
        },
        created: function() {
            if(this.value) {
                this.data = this.value;
            }
        },
        methods: {
            callFunc: function() { <-- this method is being called correctly
                this.$emit('toggleHouse', this.data);
            }
        }
    }
</script>

我也尝试过使用this.$parent.$emit('toggleHouse')，并且使用@click="callFunc"代替它是相同的：

watch: {
    data: function(value) {
        this.$emit('toggleHouse', value);
    }
}

这是app.js中主要的Vue实例函数toggleHouse()：

Vue.component('property-house', require('./components/PropertyHouseComponent.vue'));
...
toggleHouse: function() { <-- this method is being completely ignored
    if(value) {
        this.csHouse = value;
    }
}

以防万一您认为“您没有将value传递给该函数，因此它不会发生任何变化，我尝试了console.log()。但是，现在我不在意（我认为）

最后，这是HTML部分：

<property-house :value="true"></property-house>

然后它正确地呈现在DOM中：


那么，这次我在做什么错，应该怎么做才能从组件内部调用toggleHouse？提前致谢。

最佳答案

您不发出函数。您发出事件。

您需要侦听toggleHouse事件，并且我建议您不要使用驼峰式事件名称（出于超出此答案范围的原因）。

假设您改为使用toggle-house。

this.$emit('toggle-house', value)

您使用property-house的位置应如下所示

<property-house :value="true" @toggle-house="toggleHouse"></property-house>

注意@toggle-house。这是在Vue中侦听事件的快捷方法。您还可以使用完整语法v-on:toggle-house="toggleHouse"。

无论哪种情况（使用@toggle-house或v-on:toggle-house），都将设置一个侦听器，以侦听您从子组件发出的toggle-house事件，该子组件在事件发生时调用toggleHouse方法。

这是一个非常基本的例子。

console.clear()

Vue.component("property-house", {
  template: `
    <div>
      <button @click="$emit('toggle-house', 'Clicked the button')">Click Me</button>
    </div>`
})

new Vue({
  el: "#app",
  methods: {
    toggleHouse(message){
      alert(message)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <property-house @toggle-house="toggleHouse"></property-house>
 </div>