1. props的组件传值
props选项:用props进行组件传值的时候,必须先声明props中的属性在选项对象中,例:
export default defineComponent({
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
required: true,
},
}
})
在以上代码中,通过props选项声明了2个prop,它们分别为name和age。
通过v-bind绑定数据:在使用该组件的时候,需要对props中的属性进行绑定,例:
<template>
<div id="#app">
<Child :name="name" :age="age" :sex="sex" @click="void(0)" style="display: block"/>
</div>
</template>
<script>
import Child from './components/Child'
import { ref } from 'vue'
export default {
name: "App",
setup() {
return {
name: ref("小红"),
age: ref(18),
sex: ref("女")
}
},
components: {
Child
}
};
</script>
在以上的代码中,通过在父组件为该组件分别绑定了name,age,sex
在组件中使用prop:这里我们通过setup函数进行prop的访问
<script>
import { defineComponent } from "vue";
export default defineComponent({
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
required: true,
},
},
setup(prop) {
for (let key in prop) {
console.log(key)
}
},
});
</script>
在以上的代码中,将所有prop输出到控制台当中,结果如下:
从图中可以看出,name和age已经被输出到控制台 。父组件同时也绑定了sex,而控制台并没有输出sex的内容,因为在子组件props选项中没有对sex进行声明。
2. attrs中保存的数据
我们对刚刚的代码进行一下修改
<script>
import { defineComponent } from "vue"
export default defineComponent({
props: {
name: {
type: String,
required: true
},
age: {
type: Number,
required: true
},
},
setup(prop, { attrs }) {
console.log(`----------------
this is props
-----------------`);
for (let key in prop) {
console.log(`${key} : ${prop[key]}`)
}
console.log(`----------------
this is attrs
-----------------`);
for (let key in attrs) {
console.log(`${ key } : ${ attrs[key] }`)
}
},
})
</script>
以上代码分别输出了所有props、attrs中的数据
下面是输出的结果
以上代码输出了props,attrs中所有的数据,从中可以看出:attrs可以获取到除了prop的其它数据,同时事件可以获取
————————————————
版权声明:本文为CSDN博主「꧁TL꧂」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42824310/article/details/119274020