$attrs 属性可以看做 props 的加强版,用来简化 vue 组件传值
先说区别:
- props 要先声明才能取值,attrs 不用先声明
- props 声明过的属性,attrs 里不会再出现
- props 不包含事件,attrs 包含
- props 支持 string 以外的类型,attrs 只有 string 类型
下面我们举例说明
那如果我们在子组件中声明了 props 呢?
将 size 属性在 props 中进行声明,再执行打印,果然 size 属性出现在了 props 对象中,而 attrs 中这次却没有再体现: 接下来我们在父组件中增加一个值为 Boolean 的属性 看到出现在 attrs 中的 disabled 是一个 值为空字符串的属性: 我们在 props 中声明 disabled 为 Boolean 类型: 重新打印结果:
以上两次打印得出第四条结论:props 支持 string 以外的类型,attrs 只有 string 类型
完整代码:
父组件
<template>
<Button @click="onClick" @mouseover="onClick" @focus="onClick" size="small" disabled>
你好
</Button>
</template>
<script lang="ts">
import Button from '../lib/Button.vue'
export default {
components: {
Button,
},
setup() {
const onClick = () => {
console.log('hi')
}
return {
onClick,
}
},
}
</script>
子组件
<template>
<div>
<button>
<slot />
</button>
</div>
</template>
<script lang="ts">
export default {
props: {
size: String,
disabled: Boolean,
},
setup(props, context) {
console.log('props:', {
...props,
})
console.log('context.attrs:', {
...context.attrs,
})
},
}
</script>
网友评论