$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>
Logo

前往低代码交流专区

更多推荐