预防家暴，☠️ 慎用 $listeners2021 年 5 月 31 日，没错，就是在六一儿童节的前一天。一宗错综

关键词：Vue $listeners $attrs bug 透传

2021 年 5 月 31 日，没错，就是在 六一儿童节 的前一天。一宗 错综复杂、惊天地泣鬼神、惨绝人寰 的 家暴 未成年人的惨案，悄悄地发生了！

欢迎来到 《JSChen 的新闻联播间》！用诙谐的方式记录工作中遇到的一些灵异事件，大家好，我是技术小侦探 JSChen。

话接上文，这惨案的背后到底发生了什么呢？

下面，就让身为 正义天使 的 JSChen(我) 来带领大家，逐步地揭开整宗案件的神秘面纱！☠️

案件的起因

世间之大，无奇不有，总有一些调皮捣蛋、却又活泼开朗的祖国花朵（可爱的小孩儿）干一些童年的田间趣事（勾当）。

今天天气晴朗，清风徐徐，主人公 小明 打开家门，走了出来，看到蓝色的天空中白云一朵朵像极了棉花☁️ 。然后他就......

人物关系了解

qyo8u.csb.app_ (3).png

案件的经过

温馨提示：源代码在最后的附录

components/XiaoMing.vue(小明)

// 小明
<template>
  <div class="person" @click="上房揭瓦()">
    <div class="house">🏠</div>
    <div class="btn">👆 上房揭瓦</div>
    <div class="person">我是 👦 小明 👦</div>
  </div>
</template>

<script>
export default {
  name: "XiaoMing",
  methods: {
    上房揭瓦() {
      console.log("小明: 上房揭瓦");
      this.$emit("上房揭瓦");
    },
  },
};
</script>

小明 爬上了屋顶，并且开启了 自嗨 模式，同时告诉了自己的 爸爸

components/Papa.vue(小明爸爸)

<template>
  <div class="person">
    我是小明的 👨 爸爸 👨
    <XiaoMing 
      @上房揭瓦="上房揭瓦()" 
      v-on="$listeners">
    </XiaoMing>
  </div>
</template>

<script>
import XiaoMing from "./XiaoMing";

export default {
  name: "Papa",
  components: {
    XiaoMing,
  },
  methods: {
    上房揭瓦() {
      this.$emit("上房揭瓦");
    },
  },
};
</script>

小明爸爸，是一个和蔼可亲又憨态可掬（像 JSChen 的同事 小烽 一样）的 大憨憨，理解孩子的天真烂漫，不忍过多苛责，所以，小明爸爸 把 小明 上房揭瓦的事情告诉了 小明爷爷。

彩蛋：小明爷爷 平常很关心 小明 的一举一动（$listeners）

components/Grandpa.vue(小明爷爷)

<template>
  <div class="person">
    我是小明的爷爷👴
    <Papa @上房揭瓦="上房揭瓦()"></Papa>
  </div>
</template>

<script>
import Papa from "./Papa";

export default {
  name: "Grandpa",
  components: {
    Papa,
  },
  methods: {
    上房揭瓦() {
      console.log("爷爷: 暴打小学生");
    },
  },
};
</script>