[JavaScript知识库]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方式传递方法。

   <parent :sendText="sendText" @handleChange="changeMsg"></parent>
   

2. 父级组件

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

   <son v-bind="$attrs" v-on="$listeners"></son>
   

3. 孙级组件

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

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

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

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

二. 传值实例

1. 祖级组件

   <template>
     <div>
       <h3>祖级组件</h3>
       <p>接收信息：{{ msg }}</p>
       <hr />
       <parent :sendText="sendText" @handleChange="changeMsg"></parent>
     </div>
   </template>
   
   <script>
   import Parent from "./Parent.vue";
   export default {
     components: {
       Parent
     },
     data() {
       return {
         sendText: "收到请回答",
         msg: ""
       };
     },
     methods: {
       changeMsg(evt) {
         console.log("后代组件传回来的值", evt);
         this.msg = evt;
       }
     }
   };
   </script>
   
   <style scoped>
   </style>
   

2. 父级组件

   <template>
     <div>
       <h3>父级组件</h3>
       <hr />
       <son v-bind="$attrs" v-on="$listeners"></son>
     </div>
   </template>
   
   <script>
   import Son from "./Son.vue";
   export default {
     components: {
       Son
     },
     data() {
       return {};
     },
     created() {
       console.log("parent", this.$attrs, this.$listeners);
     }
   };
   </script>
   
   <style scoped>
   </style>
   

3. 孙级组件

   <template>
     <div>
       <h3>孙级组件</h3>
       <p>接收信息：{{ text }}</p>
       <button @click="clickBtn">传值给祖级组件</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         text: ""
       };
     },
     created() {
       console.log("son", this.$attrs, this.$listeners);
       this.text = this.$attrs.sendText;
     },
     methods: {
       clickBtn() {
         this.$emit("handleChange", "收到！");
       }
     }
   };
   </script>
   
   <style scoped>
   </style>