Vue从入门到实战：监听子组件事件
来自CloudWiki
112.230.102.73（讨论）2021年2月11日 (四) 06:45的版本
子组件的某些功能需要和父组件进行通信，应该如何实现呢 ？
在Vue.js中，这是通过自定义事件来实现的。子组件使用$emit()方法触发事件，父组件使用v-on指令监听子组件的自定义事件。
$emit()方法的语法形式如下：
vm.$emit(eventName,[...args])
eventName是事件名，args是附件参数，如果子组件需要向父组件传递参数，就可以通过第二个参数来传。
子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件：
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件：
<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post>
举例
设计两个组件来实现一个BBS项目
PostList负责整个帖子列表的渲染，
PostListItem负责单个帖子的渲染。“点赞”按钮在子组件中，为了向父组件通知点击事件，可以使用自定义事件的方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<post-list></post-list>
</div>
<script>
// 父组件
Vue.component('PostList', {
data() {
return {
posts: [
{id: 1, title: '《Servlet/JSP深入详解》怎么样', author: '张三', date: '2019-10-21 20:10:15', vote: 0},
{id: 2, title: '《VC++深入详解》观后感', author: '李四', date: '2019-10-10 09:15:11', vote: 0},
{id: 3, title: '《Vue.js无难事》怎么样', author: '王五', date: '2019-11-11 15:22:03', vote: 0}
]
}
},
methods: {
// 自定义事件vote的事件处理器方法
handleVote(id){
this.posts.map(item => {
item.id === id ? {...item, voite: ++item.vote} : item;
})
}
},
template: `
<div>
<ul>
<PostListItem
v-for="post in posts"
:key="post.id"
:post="post"
@vote="handleVote(post.id)"/> <!--监听自定义事件-->
</ul>
</div>`
});
// 子组件
Vue.component('PostListItem', {
methods: {
handleVote(){
// 触发自定义事件
this.$emit('vote');
}
},
props: ['post'],
template: `
<li>
<p>
<span>标题：{{post.title}} | 发帖人：{{post.author}} | 发帖时间：{{post.date}} | 点赞数：{{post.vote}}</span>
<button @click="handleVote">赞</button>
</p>
</li>`
});
new Vue({
el: '#app'
})
</script>
</body>
</html>
