vue 组件传值方法2-使用$attrs实现组件传值
图中 第一行是最高级组件里的两条数据’App‘和‘组件传值’，‘组件传值’是用笨办法每一个组件中都用props定义个属性接受，很费劲，数据多了不小心就出错；‘App’是用attrs来实现的，官网是这么描述的：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 .
·
图中 第一行是最高级组件里的两条数据’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>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献6条内容
所有评论(0)