一、自定义事件作用
父组件是使用props传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
二、如何使用自定义事件
可以使用v-on绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
使用$on(eventName,fn)监听事件使用$emit(eventName, data)触发事件
<template><div><p><a @click="click()">click</a></p></div></template><script>export default {name: "CT",props: {id: {type: String,default: "CT",},},data() {return {};},mounted() {console.log(this.$options.name);},methods: {click() {this.$emit("getData", "from CT data");},},};</script>
<template><div><p>BT</p><CT ref="ct"></CT></div></template><script>import CT from "./CT.vue";export default {name: "BT",components: {CT },data() {return {};},mounted() {this.$refs.ct.$on("getData", (data) => {console.log(data);});},methods: {},};</script>
三、$on(eventName,fn)另一种写法
父组件可以在使用子组件的地方直接用v-on:eventName（@eventName） 来监听子组件触发的事件。
<template><div><p><a @click="click()">click</a></p></div></template><script>export default {name: "CT",props: {id: {type: String,default: "CT",},},data() {return {};},mounted() {console.log(this.$options.name);},methods: {click() {this.$emit("getData", "from CT data");},},};</script>
<template><div><p>BT</p><CT v-on:getData="getData($event)"></CT><CT @getData="getData2($event)"></CT></div></template><script>import CT from "./CT.vue";export default {name: "BT",components: {CT },data() {return {};},mounted() {},methods: {getData(event) {console.log("getData: ", event);},getData2(event) {console.log("getData2: ", event);},},};</script>
四、自定义事件只触发一次$once(eventName,fn)
<template><div><p><a @click="click()">click</a></p></div></template><script>export default {name: "CT",props: {id: {type: String,default: "CT",},},data() {return {};},mounted() {console.log(this.$options.name);},methods: {click() {this.$emit("getData", "from CT data");},},};</script>
<template><div><p>BT</p><CT ref="ct"></CT></div></template><script>import CT from "./CT.vue";export default {name: "BT",components: {CT },data() {return {};},mounted() {this.$refs.ct.$once("getData", (data) => {console.log(data);});},methods: {},};</script>
五、解绑$off('eventName')
<template><div><p><a @click="click()">click</a></p></div></template><script>export default {name: "CT",props: {id: {type: String,default: "CT",},},data() {return {};},mounted() {console.log(this.$options.name);},methods: {click() {this.$emit("getData", "from CT data");},},};</script>
<template><div><p>BT - <span @click="offEvent()">offEvent</span></p><CT ref="ct"></CT></div></template><script>import CT from "./CT.vue";export default {name: "BT",components: {CT },data() {return {};},mounted() {this.$refs.ct.$on("getData", (data) => {console.log(data);});},methods: {offEvent() {this.$refs.ct.$off("getData");},},};</script>
vm.$off('eventName')：解绑一个自定义事件vm.$off(['eventName', 'demo'])：解绑多个自定义事件vm.$off()：解绑所有的自定义事件
