关于vue中this.$attrs的理解
【代码】关于vue中this.$attrs的理解。
·
$attrs可以拿到父组件使用子组件时,传给那些子组件没有在props配置的属性,如果一个子组件有在props配置了父组件设置的属性,$attrs是不会有这个值得,因此在对一些ui库组件进行二次封装得时候,可以v-bind="$attrs"让他继承原有的属性,而我们在props里配置我们自己二次封装时所要的属性,如下:
// 父组件
<ceshi :percentage="30" textColor="pink"></ceshi>
// 子组件
<template>
<view>
<view class="">
{{ textColor }}
<u-line-progress :activeColor="textColor" v-bind="$attrs"></u-line-progress>
</view>
</view>
</template>
<script>
export default {
props: {
textColor: {
type: String,
default: ()=>{
return ''
}
},
},
created() {
console.log('$attrs',this.$attrs)
//这时候this.$attrs的值是{percentage: 30},textColor没有包含进来
},
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)