Vue中爷孙传值$attrs和使用$listeners爷爷传值

.dv{width:600px;height:600px;background-color:黄色;}componentB我是B传给我的是{{text}}导入父亲from'./father'exportdefault{components:{father},data(){return{ag:12,nu:111,}},methods:{onChange(ha){console.log(ha)//'传给爸爸的'}},father.vue所谓$arrts其实就是多级组件中的props，它就像一个中间件，用来传递祖父母传来的数据组件传给孙子组件，使用时只需要在父组件中为孙子组件配置v-bind="$attrs"，然后将孙子组件需要的数据传入祖父组件，孙子组件可以正常接收。在实际开发过程中，经常会出现组件的多级嵌套。这时，如下图底部所示，组件A需要向组件C传递数据，通常可以使用props顺序传递和Vuex（状态管理）来实现，但这两种方式要么代码臃肿，要么大材小用，而这次$attrs可以很好的解决这个问题。$attrs是Vue实例的属性。详见democomponentA我是组件A/template\>导入父亲from'./father'exportdefault{components:{father},data(){return{ag:12,nu:111,}},methods:{onChange(ha){console.log(ha)//'传给爸爸的'}},father.vueson.vue$attrs：包含父作用域中不被考虑（也不期望）的属性绑定（类和样式除外），当组件不考虑时可以通过v-bind="$attrs"传递给内部组件声明任何道具时，它包括来自所有父范围的绑定（类和样式除外）。$listeners：包含父作用域中的v-on事件监听器（不带.native修饰符）。它可以通过v-on="$listeners"传递给内部组件。它是一个包含所有作用于该组件的事件监听器的对象，相当于子组件继承了父组件的事件。