父子組件之間通信 · vue.js

[TOC] ## 名詞解釋 inheritAttrs：默認值true,繼承所有的父組件屬性（除props的特定綁定）作為普通的HTML特性應用在子組件的根元素上，如果你不希望組件的根元素繼承特性設置inheritAttrs: false,但是class屬性會繼承（**簡單的說，inheritAttrs：true 繼承除props之外的所有屬性；inheritAttrs：false 只繼承class屬性**） $attrs--繼承所有的父組件屬性（除了prop傳遞的屬性、class 和 style ），一般用在子組件的子元素上，如第一個例子的 $listeners--屬性，它是一個對象，里面包含了作用在這個組件上的所有監聽器，你就可以配合?`v-on="$listeners"`?將所有的事件監聽器指向這個組件的某個特定的子元素。（**相當于子組件繼承父組件的事件**） ## 主要用途用在父組件傳遞數據給子組件或者孫組件例1 ~~~ <body class=""> <div id="app" class="demo"> <base-input label="姓名" class="username-input" placeholder="Enter your username" data-date-picker="activated"></base-input> </div> <script src="js/vue-2.5.13.js"></script> <script> Vue.component("base-input", { inheritAttrs: false, //此處設置禁用繼承特性（只繼承class屬性） props: ["label"], template: ` <label> {{label}} {{$attrs.placeholder}} {{$attrs["data-date-picker"]}} <input v-bind="$attrs"/> </label> `, mounted: function() { console.log(this.$attrs); } }) const app = new Vue({ el: '#app', data: { } }); </script> </body> ~~~ 上面的例子渲染后的HTML如下： ~~~ <label class="username-input"> 姓名 Enter your username activated <input placeholder="Enter your username" data-date-picker="activated"> </label> ~~~ 如果把上面例子中的inheritAttrs: false去掉或者改為inheritAttrs: true，最終渲染為： ~~~ <label placeholder="Enter your username" data-date-picker="activated" class="username-input"> 姓名 Enter your username activated <input placeholder="Enter your username" data-date-picker="activated"> </label> ~~~ 同時子組件可以單獨使用$attrs，如上面的{{$attrs.placeholder}}依然是繼承父組件的placeholder屬性例2：假設有三個組件A組件包含B,B組件包含C組件 ~~~ A組件（App.vue） <template> <div id="app"> <child1 :p-child1="child1" :p-child2="child2" v-on:test1="onTest1" //此處監聽了兩個事件，可以在B組件或者C組件中直接觸發 v-on:test2="onTest2"> </child1> </div> </template> <script> import Child1 from './Child1.vue'; export default { data() { return {}; }, components: { Child1 }, methods: { onTest1() { console.log('test1 running...'); }, onTest2() { console.log('test2 running'); } } }; </script> B組件（Child1.vue） <template> <div class="child-1"> <p>in child1:</p> <p>props: {{pChild1}}</p> <p>$attrs: {{$attrs}}</p> <hr>   <child2 v-bind="$attrs" v-on="$listeners"></child2> </div> </template> <script> import Child2 from './Child2.vue'; export default { props: ['pChild1'], data() { return {}; }, inheritAttrs: false, components: { Child2 }, mounted() { this.$emit('test1'); } }; </script> C 組件 (Child2.vue) <template> <div class="child-2"> <p>in child2:</p> <p>props: {{pChild2}}</p> <p>$attrs: {{$attrs}}</p> <hr> </div> </template> <script> export default { props: ['pChild2'], data() { return {}; }, inheritAttrs: false, mounted() { this.$emit('test2'); } }; </script> ~~~ ## 使用說明 > 1. 子組件使用：通過設置inheritAttrs：true 繼承除props之外的所有屬性；inheritAttrs：false 只繼承class屬性,位置與name同級） > 2. 注意：是props之外的所有屬性，要繼承props屬性的話通過將參數傳遞到data中，使用方式（1. 在props中定義接收的參如：getdata：{type:String, default:=>"" 2. 在data中添加參數：data({getdata}){data:getdata}） > 2. 此時子組件就獲取到了父組件的data中的數據，通過給子組件使用 v-bind="$attrs" v-on="$listeners"傳遞參數和監聽事件，子組件可以通過{{$attrs}}使用參數 > 3. 孫組件子組件可以通過{{$attrs}}使用參數