一般上我们利用v-bind和props传参时，会单个传输props属性。这里我们可以使用v-bind进行多个props属性的传参，只要属性名对应即可识别。
本例子中，父组件通过props向子组件传入name、sex等基本信息，子组件接收参数并展示出来“
父组件:
<template>
<div class='parent'>
// 原先的方法
<!-- <Children :name="person.name"-->
<!-- :sex="person.sex"/>-->
// 现在的方法
<Children v-bind="person" />
</div>
</template>
<script>
import Children from './children';
import { defineComponent, ref} from 'vue';
export default defineComponent({
name: 'parent',
components: {
Children
},
setup() {
const person = ref({
name: 'ab',
sex: '男'
})
return {
person: person.value,
}
}
});
子组件:
<template>
<div class='children'>
我叫{{name}}，我的性别是{{sex}}
</div>
</template>
<script>
export default {
name: 'children',
props: {
name: String,
sex: String,
}
};
</script>
-
v-bind打包传输的props属性，可以被重复传入； - 同一属性多次传入，后者会覆盖前者；
- 可以再分别传入其他没被打包的属性。
父组件：
<template>
<div class='parent'>
<!-- <Children :name="person.name"-->
<!-- :sex="person.sex"/>-->
<Children sex="女"
v-bind="person"
age="13"
name="小明"/>
</div>
</template>
<script>
import Children from './children';
import { defineComponent, ref} from 'vue';
export default defineComponent({
name: 'parent',
components: {
Children
},
setup() {
const person = ref({
name: 'ab',
sex: '男'
})
return {
person: person.value,
}
}
});
</script>
子组件：
<template>
<div class='children'>
我叫{{name}}，我的性别是{{sex}}，年龄是{{age}}
</div>
</template>
<script>
export default {
name: 'children',
props: {
name: String,
sex: String,
age: Number,
}
};
</script>
效果示意.png
