正常情况下，父组件可以监听子组件传递过来的事件，那么子组件怎么监听父组件的事件呢？
实际案例：
假设子组件是一个弹框表单，子组件里边我预留了一个按钮位置，用于【添加数据】或者【编辑数据】按钮，点击按钮，子组件显示弹框。
示例一：整个组件监听事件
<template> <div @click="changeVisiable"> <slot></slot> <div v-show="visiable">显示隐藏的内容</div> </div> </template> <script> export default { data() { return { visiable: false, }; }, methods: { changeVisiable() { this.visiable = !this.visiable; }, }, }; </script>
父组件
<template> <div id="app"> <Child> <button>打开</button> </Child> </div> </template> <script> import Child from "./Child.vue"; export default { name: "app", data() { return {}; }, components: { Child }, }; </script>
示例二：使用插槽事件
子组件
<template> <div> <slot></slot> <div v-show="visiable">显示隐藏的内容</div> </div> </template> <script> export default { data() { return { visiable: false, reference: null, }; }, methods: { changeVisiable() { this.visiable = !this.visiable; }, }, mounted() { if (this.$slots.default) { this.reference = this.$slots.default[0].elm; } if (this.reference) { this.reference.addEventListener("click", this.changeVisiable, false); } }, beforeDestroy() { if (this.reference) { this.reference.removeEventListener("click", this.changeVisiable, false); } }, }; </script>
父组件
<template> <div id="app"> <Child> <button>打开</button> </Child> </div> </template> <script> import Child from "./Child.vue"; export default { name: "app", data() { return {}; }, components: { Child }, }; </script>
方式三：监听参数变化
<template> <div> <slot></slot> <div v-show="visiable">显示隐藏的内容</div> </div> </template> <script> export default { props: { visiable: { type: Boolean, default: false, }, }, }; </script>
父组件
<template> <div id="app"> <Child :visiable="visiable"> <button @click="handleClick">打开</button> </Child> </div> </template> <script> import Child from "./Child.vue"; export default { name: "app", data() { return { visiable: false, }; }, components: { Child }, methods: { handleClick() { this.visiable = !this.visiable; }, }, }; </script>
此例通过父组件传递的参数控制子组件的内容显示，通过参数来实现组件通信，如果<slot> 标签的内容变化可预期，可以使用一个参数来控制是添加，还是编辑，来显示不一样的按钮形式。
参考
