引自：https://www.cnblogs.com/xshan/p/12341906.html
当子组件需要向父组件传递数据时，就要用到自定义事件。v-on指令除了监听DOM事件外，还可以用于组件之间的自定义事件。
在JS的设计模式—观察者模式中有dispatchEvent和addEventListener这个两个方法。
Vue组件也有类似的一套模式，子组件用 $ emit()来触发事件,父组件用$ on()来监听子组件的事件。
父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。
当我们需要在操作组件后引起组件之外的元素发生变化时，就需要是这里的内容。比如：当选中书后，自动显示您选中的书名。其中书籍列表是使用组件写的。显示选中书籍名是在组件之外。
在添加事件的时候需要注意一下事项：
1、在定义组件时`Vue.component(组件名，{props(参数),template(html代码),methods(子组件中的事件),}`,
在子组件中正常调用该事件，但是在需要与父组件联系时，需要在该事件中写第2条的信息。
2、在需要出发事件的时候，调用`this.emit('事件的名称'，参数(可以是多个))
3、在使用这个组件的时候，绑定下事件，语法和之前绑定是一样的，比如：@father-click="FatherClick",
@事件名称=父组件中事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Vue组件中自定义事件</title>
</head>
<body>
<div id="app">
<child-template v-for="book in books" :book="book" @father-click="FatherClick"></child-template>
<p>你选中了：{{checkbooks}}</p>
</div>
<script>
Vue.component("child-template", {
props: ['book'],
template: `
<div>
<label>{{book.title}}</label>
<input type="checkbox" @click="onCheck" >
</div>
`,
methods: {
onCheck() {
// 将子组件与父组件联合起来
this.$emit('father-click', this.book)
}
},
})
new Vue({
el: "#app",
data: {
books: [{
title: '水浒传',
},
{
title: '三国演义',
},
{
title: '西游记',
},
{
title: '红楼梦',
},
],
checkbooks: []
},
methods: {
'FatherClick'(bookName) {
// indexOf：获取某个元素在数组中的位置，如果返回值为非负数，那么就是存在，就是下标
// 否则，代表这个元素在数组中不存在
let booknameIndex = this.checkbooks.indexOf(bookName.title)
if (booknameIndex >= 0) {
this.checkbooks.splice(booknameIndex, 1)
} else {
this.checkbooks.push(bookName.title)
}
}
}
})
</script>
</body>
</html>