boke | vue中实现在子组件中刷新父组件列表
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一新技能~撒花~
更多推荐
已为社区贡献1条内容
所有评论(0)