Question

好的，这个网络应用我仍然是＃34;试图制作的时间比我预期的要长，我仍然没有得到关于Vue 2的一些东西。

例如，我有一个组件在主Vue实例中呈现，而我$emit在组件内部呈现一个功能。当然，＆＃34;内部＆＃34;功能正在起作用但不是＆＃34;主要＆＃34;之一：

这是组件文件 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); } }：

toggleHouse()

这是 app.js 中的主要Vue实例函数Vue.component('property-house', require('./components/PropertyHouseComponent.vue')); ... toggleHouse: function() { <-- this method is being completely ignored if(value) { this.csHouse = value; } }：

value

如果您认为＆＃34;您没有将console.log()传递给该函数，那么它不会改变任何内容，我尝试使用<property-house :value="true"></property-house>。但我现在不关心（我认为）

最后，这是HTML部分：

toggleHouse

然后它在DOM中正确呈现：

那么，这次我做错了什么以及为了从组件内部调用django-db我应该怎么做？提前谢谢。

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事件事件发生时的方法。

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

＆＃13;

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)
    }
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

我需要更改策略，因为@click="callFunc"采用了相反的复选框值，我猜，在更改v-model="data"之前该事件已被触发。

因此我的新组件如下所示：

<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">
            <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;
            }
        },
        watch: {
            data: function(value) {
                this.$emit('callback', value);
            }
        }
    }
</script>

Vue 2组件未调用主实例功能

2 个答案: