console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
// childCom2.vue
<template>
<div class="border">
<p>boo: {{ boo }}</p>
<p>childCom2: {{ $attrs }}</p>
<child-com3 v-bind="$attrs"></child-com3>
</div>
</template>
<script>
const childCom3 = () => import("./childCom3.vue");
export default {
components: {
childCom3
},
inheritAttrs: false,
props: {
boo: String
},
created() {
console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
}
};
</script>
// childCom3.vue
<template>
<div class="border">
<p>childCom3: {{ $attrs }}</p>
</div>
</template>
<script>
export default {
props: {
coo: String,
title: String
}
};
</script>
如上图所示$attrs表示没有承袭数据的对象，格式为{属性名：属性值}。Vue2.4提供了$attrs , $listeners 来传递数据与事情，跨级组件之间的通讯变得更复杂。
复杂来说：$attrs与$listeners 是两个对象，$attrs 里寄存的是父组件中绑定的非 Props 属性，$listeners里寄存的是父组件中绑定的非原生事情。
办法五、provide/inject
1.简介
Vue2.2.0新增API,这对选项需求一同运用，以允许一个祖先组件向其一切子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里一直失效。一言而蔽之：祖先组件中经过provider来提供变量，然后在子孙组件中经过inject来注入变量。
provide / inject API 主要处置了跨级组件间的通讯成绩，不过它的运用场景，主要是子组件获取下级组件的形状，跨级组件间树立了一种自动提供与依赖注入的关系。
2.举个例子
假定有两个组件： A.vue 和 B.vue，B 是 A 的子组件
// A.vue
export default {
provide: {
name: '浪里行舟'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 浪里行舟
}
}
(责任编辑：admin)