父子组件之间通信 · 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}}使用参数