Vue子组件监听父组件的事件

正常情况下，父组件可以监听子组件传递过来的事件，那么子组件怎么监听父组件的事件呢？

实际案例：
假设子组件是一个弹框表单，子组件里边我预留了一个按钮位置，用于【添加数据】或者【编辑数据】按钮，点击按钮，子组件显示弹框。

示例一：整个组件监听事件

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

父组件

<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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

此时也可以实现父组件中点击按钮，子组件触发相应的事件,此时，整个div标签都会接受到点击事件，范围扩大了

示例二：使用插槽事件

子组件

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

父组件

<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>


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
 

当父组件中的按钮被点击，子组件的隐藏内容将会被显示

此方法发现这个组件写的代码量变大了

方式三：监听参数变化

<template>
  <div> <slot></slot> <div v-show="visiable">显示隐藏的内容</div>
  </div>
</template>

<script>
export default {
  props: { visiable: { type: Boolean, default: false, },
  },
};
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

父组件

<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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
 

此例通过父组件传递的参数控制子组件的内容显示，通过参数来实现组件通信，如果<slot> 标签的内容变化可预期，可以使用一个参数来控制是添加，还是编辑，来显示不一样的按钮形式。

参考
[ Vue ] 给 slot 插槽绑定事件

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/109910429