父组件在vue中没有收到子事件

Question

我遇到了一个问题，即触发了一个事件，但父级似乎无法听到它。我已经烧了3个多小时试图找到问题无济于事。 这是父组件。

Thread.vue

    <script>
    import Tagging from '../components/Tagging.vue';

    export default {
        props: ['thread'],

        components: {Tagging},

        data () {
            return {
                repliesCount: this.thread.replies_count,
                locked: this.thread.locked,
                title: this.thread.title,
                body: this.thread.body,
                selectedTags: this.thread.selected_tags,
                form: {},
                editing: false
            };
        },
        methods: {
            tagsChanged(value){ <---- this handler is never called
                console.log("received")
            }
        }

    }
</script>

还有子组件

Tagging.vue

    <!-- Vue component -->
    <template>
     <div>
    <label class="typo__label">Tagging:</label>
    <multiselect
      v-model="value"
      tag-placeholder="Add this as new tag"
      placeholder="Search or add a tag"
      label="name"
      track-by="code"
      :options="options"
      :multiple="true"
      :taggable="true"
      @tag="addTag"
      @input="emitToParent" //this event handler emits an event to parent
    ></multiselect>
    </div>
   </template>

   <script>
     import Multiselect from "vue-multiselect";

export default {
  props: ["tags","previousTags","repliesCount"],
  components: {
    Multiselect
  },
  data() {
    return {
      value: this.previousTags,
      options: this.tags,
    };
  },
  methods: {
    addTag(newTag) {
      const tag = {
        name: newTag,
        code: newTag.substring(0, 2) + Math.floor(Math.random() * 10000000)
      };
      this.options.push(tag);
      this.previousTags.push(tag);
      this.form.selected_tags.push(tag)
    },
    emitToParent (event) {
      this.$emit('childToParent', this.value)//this event is being fired(verified on vue developer tools
    }
  }
};
</script>

在我的 HTML 上是模板

<tagging @childToParent="tagsChanged" :tags="some json" :previous-tags="some json"></tagging>

我尝试过改变

@childToParent="tagsChanged"

到

v-on:childToParent="tagsChanged"

但它不起作用。

我错过了什么？

谢谢

Answer 1

从表面上看，$emit 部分看起来不错。

首先，您能否将console.log() 添加到emitToParent 以确保您正在触发此方法。

其次，确保你没有收到任何错误，检查控制台。

第三，这是不正确的语法：:tags="some json" :previous-tags="some json"。这会引发错误。