Vue中的发射不会发射

Question

我想做什么：

我单击 cmets.vue 中的按钮，该按钮假定添加在文本区域中键入的注释。这个动作将被发送到 event.vue 来监听这个动作。当它听到这个动作时，它将激活一个将评论推送到列表中的方法。然后我想显示这个 cmets 列表。我不知道为什么它不起作用。

评论.vue：

<template>
  <div>
    <form>
      <label>Comments</label>
      <textarea v-model="comment"/>
      <input class="button" @click.prevent="addComment" type="submit" value="Add comment">
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: 'Arnulf',
      comment: ''
      /* timeAndDate: Date */
    }
  },
  methods: {
    addComment () {
      const comment = {
        name: this.name,
        comment: this.comment
        /* timeAndDate: this.timeAndDate */

      }
      console.log('hello')
      this.$emit('submitted', comment)// THIS WONT EMIT FOR SOME REASON

      this.comment = ''
    }
  }
}
</script>

Event.vue：

<template>
  <div>
    <CommentList :comments="listOfComments"></CommentList>
    <Comments @submitted="addComment"></Comments>
  </div>
</template>

<script>
import CommentList from '@/components/CommentList'
import Comments from '@/components/Comments'
export default {
  data () {
    return {
      listOfComments: []
    }
  },
  name: 'Event',
  components: {
    CommentList,
    Comments
  },
  methods: {
    addComment (comment) {
      console.log('bruh')
      this.listOfComments.push(comment)
    }
  }
}
</script>

commentlist.vue:

<template>
  <div>
    <h3>Kommentarer:</h3>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        {{comment.name}}:
        <br/>
        "{{comment.comment}}"
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'CommentList',
  props: {
    comments: {
      type: Array
    }
  }
}
</script>

编辑：添加了其余代码，因此可以跟踪所有逻辑。

Answer 1

您的代码运行良好。检查下面的代码sn-p。

Vue.config.productionTip = false;
Vue.config.devtools = false;

Vue.component('root', {
  data () {
    return {
      listOfComments: []
    }
  },
  name: 'Event',
  methods: {
    addComment (comment) {
      console.log('bruh')
      this.listOfComments.push(comment)
    }
  },
  template: `
  <div>
    <comments-list :comments="listOfComments"></comments-list>
    <comments @submitted="addComment"></comments>
  </div>
  `
});

Vue.component('comments',{
data () {
    return {
      name: 'Arnulf',
      comment: ''
      /* timeAndDate: Date */
    }
  },
  methods: {
    addComment () {
      const comment = {
        name: this.name,
        comment: this.comment
        /* timeAndDate: this.timeAndDate */

      }
      console.log('hello')
      this.$emit('submitted', comment)// THIS WONT EMIT FOR SOME REASON

      this.comment = ''
    }
  },
  template : `
    <div>
    <form>
      <label>Comments</label>
      <textarea v-model="comment"/>
      <input class="button" @click.prevent="addComment" type="submit" value="Add comment">
    </form>
  </div>
  `
});

Vue.component('comments-list',{
  props: {
    comments: {
      type: Array
    }
  },
  template : `
  <div>
    <h3>Kommentarer:</h3>
    <ul>
      <li v-for="(comment, index) in comments" :key="index">
        {{comment.name}}:
        <br/>
        "{{comment.comment}}"
      </li>
    </ul>
  </div>
  `
});

new Vue({ el:"#root" });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <root></root>
</div>