Vue - 祖孙组件之间跨级传值（$attrs、$listeners）

• 一. 传值方法
• 二. 传值实例

1. $attrs： https://vuejs.bootcss.com/api/#vm-attrs

2. $listeners： https://vuejs.bootcss.com/api/#vm-listeners

3. 也可用于父子组件传值。

1. 祖级组件

   通过v-bing方式传递参数，v-on方式传递方法。

2. 父级组件

   中间组件 v-bind="$attrs" v-on="$listeners"

3. 孙级组件

   通过created生命周期钩子获取传递的数据。

   created() {
     console.log("son", this.$attrs, this.$listeners);
   },
   

   通过$emit向祖级组件调用方法，并传值。

   methods: {
     clickBtn() {
       this.$emit("handleChange", "收到！");
     }
   }
   

1. 祖级组件

2. 父级组件

3. 孙级组件