含义

将事件从父组件传递到子组件

作用

可以实现孙组件的数据传递到爷组件中去

示例

爷组件

<template><div id="app">我是爷组件<h3>{{ fromSunData }}</h3><fu @fromSun="fromSun"></fu></div>
</template><script>import fu from "./views/fu.vue";export default {components: {fu},data() {return {msg: "二郎神",};},methods: {fromSun(payload) {console.log("孙传祖", payload);},},};
</script>

中间组件

<sun v-on="$listeners"></sun>

孙组件

<template><div class="sunClass">我是孙子组件<button @click="sendToZu">孙传祖</button></div>
</template><script>export default {name: "DemoSun",data() {return {data: "来自孙组件的数据",};},methods: {created() {console.log(this.$listeners)  //fromSun},sendToZu() {// 孙组件能够触发爷组件的fromSun方法的原因// 是因为父组件中有一个$listeners作为中间人，去转发这个事件的触发this.$emit("fromSun", this.data);},},};
</script>