学习要点:
1.attrs
本节课我们来要了解一下 Vue3.x 中的 setup()下 context 的 attrs 用法;
一.attrs
1. 在 setup()函数中,第二个参数可以解构出三个属性:attrs、slots、emit;
2. 首先,context 含义为:结合上下文获取相关属性的内容,并且都是非响应式;
setup(props, context) {
const {attrs, slots, emit} = context
}
或
setup(props, {attrs, slots, emit})
3. 我们在父组件调用子组件时,传递不同的属性和事件,看看 attrs 是否能识别;
<Child :title="title" @click="clickTest" size="big"></Child>
// Child.vue
setup(props, {attrs, slots, emit}) {
console.log(props)
console.log(attrs)
}
PS:发现 attrs 可以识别事件属性 clickTest,普通属性 size,但不能识别 props 属性;
PS:当我们注释掉 Props 声明,那么 attrs 就识别了,所以,他们是分开识别的;
PS:所以,使用 attrs 来代替 Props 显示,那么 return 时要注意响应式问题;
setup(props, {attrs, slots, emit}) {
return {
attrs
}
}
<h3>Child Title : {{attrs.title}}</h3>
14.setup.attrs
![](https://img-home.csdnimg.cn/images/20240711042549.png)