利用v-bind集体传递props参数

一般上我们利用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