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

Question

好吧，我“仍在”尝试制作的这个网络应用程序花费的时间比我预期的要长，而且我仍然没有得到一些关于 Vue 2 的信息。

例如，我有一个在主 Vue 实例中渲染的组件，并且我 $emit 组件内部的一个函数。当然，“内部”功能正在工作，但“主要”功能不起作用:

这是组件文件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 ？提前致谢。

Answer 1

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

您需要监听 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>