boke | vue中实现在子组件中刷新父组件列表

boke开发中有这样一个需求，用户添加评论后，在当前页面要刷新评论列表。我的结构是commentListComponent中有个评论框子组件commentBox.

首先，现在父组件中的子组件属性上添加监听事件，add-comment

<div id="comment-list" class="comment-list">
        <comment-box :article-id = articleId  @add-comment="appendComment"></comment-box>
        <ul>
         //这是comment list
       </ul>
<div>

然后，在子组件中，当添加完评论后，发射一个事件给父组件的监听属性

methods:{
  addComment() {
    //添加完评论后发射监听事件，param是要添加的那条评论消息
    this.$emit('add-comment', param)
  }
}

最后，在父组件中监听到事件后会执行appendComment方法，更新commentList的数据。

appendComment (item) {
      this.commentList.push(item)
    }

按照以上步骤就可以实现在子组件中刷新父组件列表的需求了，又get一新技能~撒花~