**解决的问题：**
使用$attrs和$listeners实现祖孙组件之间的数据传递，也就是多重嵌套组件之间的数据传递。
**注意：**
本方法针对vue2.4版本及以上，使用$attrs和$listeners来实现的
**解决方案：**
**首先创建父组件：** 父组件用于动态数据的绑定与事件的定义
<template> <div> <!--这里 :one和:two是向后代组件传递数据--> <child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"></child1> </div> </template>
<script> import Child1 from './Child.vue'; export default { data () { return { child1:'lihua', child2:'lignag', parent: 0 }; }, components: { 'child1':Child1 //引入子组件 }, methods: { onTest1 () { console.log('child') }, onTest2 (val) { this.parent = val } } } </script>
子组件的写法： 通过设置v-bind="$attrs" 和v-on="$listeners"来充当中间人，
<template> <div> <p>$attrs:{{$attrs['two']}}</p> <hr> <!-- 子组件中通过v-bind='$attrs'接受数据，通过$listeners接收事件 --> <child2 v-bind="$attrs" v-on="$listeners"></child2> </div> </template>
<script> import child2 from './Child2.vue'; export default { props: ['one','two'], //可写可不写 data () { return { } }, inheritAttrs: false, //父组件传递动态数据后，子组件的默认行为 components: { child2 }, mounted () { this.$emit('test1') //触发父组件方法的一种方式 this.$listeners.test2(123) //触发父组件方法的另一种方式 } } </script>
孙组件写法： 通过props或者$attrs和$listeners来获取父组件数据和事件。
<template> <div> <p>props:{{one}}</p> <p>props:{{two}}</p> <p>$attrs: {{$attrs['one']}}</p> <hr> </div> </template>
<script> export default { props:['one','two'], //接收父组件传递的数据，可以不写，通过$attrs来获取 data(){ return {}; }, inheritAttrs: false, //默认行为需要取消 mounted(){ this.$emit('test1') //触发父组件方法的一种方式 this.$listeners.test1(123)//触发父组件方法的另一种方式 } } </script>
另：inheritAttrs的作用:
先注意一点：使用$attrs时inhertAttrs设置为false.
当inheritAttrs设置为true时，父元素动态绑定组件的数据，子组件如果没有通过props接收的话，该属性就会附加于子组件的根元素上。什么意思看代码
//父组件 <child :one="help"></child> data(){ return { help:123 } } //子组件 <template> <div> <h1>作为子组件的我并没有设置props来接收父组件的one属性。</h1> </div> </template> //父组件解析出来就是这样 <div one="123"> <h1>作为子组件的我并没有设置props来接收父组件的one属性。</h1> </div>
所以呢我们通过v-bind="$attrs"来指定父组件数据的绑定位置，同时设置inheritAttrs为false来取消默认行为
补充知识：理解Vue.mixin，利用Vue.mixin正确的偷懒
关于Vue.mixin在vue官方文档中是这么解释的：
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
我们的理解：
Vue.mixin给我们提供了一种混入Vue实例的方法，创建了混入对象之后，我们自定义的方法或者变量可以很轻松的挂载在Vue实例上，给我们的偷懒带来方便；
Vue.mixin为我们提供了两种混入方式：局部混入和全局混入；
本文还是以demo形式来进行学习讲解，如果有条件最好还是跟着demo敲一遍，这样印象才会深刻；
局部混入：
顾名思义就是部分混入，也就是只有引入了mixin的混入对象才可以使用，并且只有在引入了mixin混入对象的组件中才生效；
来，知道了概念，我们一起来看看代码：
首先自己搭建Vue的开发环境，然后我们在src目录中新建两个vue文件，分别是page1.vue和page2.vue；
page1.vue
<template> <div>page1的值是:</div> </template> <script> export default { data () { return { } }, } </script> <style scoped> </style>
page2.vue
<template> <div>page2的值是:</div> </template> <script> export default { data () { return { } } } </script> <style scoped> </style>
然后我们修改App.vue