图中 第一行是最高级组件里的两条数据’App‘和‘组件传值’,‘组件传值’是用笨办法每一个组件中都用props定义个属性接受,很费劲,数据多了不小心就出错;
‘App’是用attrs来实现的,官网是这么描述的:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
听完一顿蒙,使用完对它的理解是:
‘不作为 prop 被识别 (且获取) 的特性’的意思是:想另一个数据‘组件传值’就是被获取的特性,就不包含在¥attrs中,下图划圈的地方可以看见打印的¥attrs中没有传递‘组件传值’数据的变量,也就没有‘组件传值’字样,也就不在¥attrs属性中,在中间的组件中,只要这样绑定
<Three :msgC="msgB" v-bind="$attrs"> Great-grandson of App component </Three>
¥attrs中的数据一直传递到要用到他的地方的上一级,在目的地使用
即可获取。
<body>
<div id="app"></div>
<script>
/*----------------------------------$attrs----------------------------------------
* 像这样多层组件之间如果像从父子间想最下面的组件传值,就不能在每一个组件中定义props用其中专很是繁琐容易出错,这时,用到 $attrs
* 官网:包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
* 当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),
* 并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
*
* 子组件中App字样是最高级组件传向最低级组件的数据
* */
//App的曾孙子
Vue.component('Three',{
data(){
return{
name:'Three'
}
},
props:{
msgC:String
},
template:`<div style="border: 1px solid #333333;background-color: #3fc4ff">
{{ name }}
<slot></slot>
{{ msgC }}{{ $attrs.app }}
</div>`,
mounted(){
console.log(this.$attrs);
}
});
//App的孙子
Vue.component('Two',{
data(){
return{
name:'Two'
}
},
props:{
msgB:String
},
template:`<div style="border: 1px solid #333333;background-color: #84ff16">
{{ name }}
<slot></slot>{{ msgB }}
<Three :msgC="msgB" v-bind="$attrs"> Great-grandson of App component </Three>
<!-- <Three v-bind="$attrs" v-on="$listeners"> Great-grandson of App component </Three>-->
</div>`,
mounted(){
console.log(this.$attrs);
}
});
//App的儿子
Vue.component('One',{
data(){
return{
name:'One',
}
},
props:{
msgA:String,
},
template:`<div style="border: 1px solid #333333;background-color: #ff8140">
{{ name }}
<slot></slot>{{ msgA }}
<Two :msgB="msgA" v-bind="$attrs"> Grandson of App component </Two>
<!-- <Two v-bind="$attrs" v-on="$listeners"> Grandson of App component </Two>-->
</div>`,
mounted(){
console.log(this.$attrs);
}
});
//定义一个全局组件作为父组件,在它下面有多个子组件 定义在下面挂在元素之前,否则找不到
//1, 从父组件传一个字符串‘Attribute’到最下层的组件中,让最下层组件能获取这个值,需要在每一个组件中定义一个属性接受,并且传递给下一级组件,稍有不慎,变会出错,而且很乱,不易后期维护和更改代码
let App = {
data(){
return{
name:"App",
PassValue:'组件传值',
}
},
template: `
<div id="app" style="border: 1px solid #333333;">
{{ name }},{{ PassValue}}
<One :msgA="PassValue" :app = 'name'>Child of App component</One>
</div>
`,
mounted(){
console.log(this.$attrs);
}
};
let vm = new Vue({
el: "#app",
data() {
return {}
},
components: {
App
},
template: '<App></App>',
mounted(){
console.log(this.$attrs);
}
});
</script>
</body>