Vue3中父组件怎么给子组件传Object类型的值？

Question

我的子组件有很多类似以下定义了变量的代码

   <div id="address">
      <p style="float: left">{{ name }}</p>
      <p style="float: right">{{ address }}</p>
    </div>

我在js部分写的是

defineProps({
   storename:{
    type: String,
    default: '店名'
  },
  address: {
    type: String,
    default: '发货地址'
  }
}）

在父组件我需要把参数列出来

<div id="one"  v-for="arr in data">
    <Child :name=arr.name
    :address=arr.address></Child>
  </div>

我该怎么把这些参数打包进一个Object里，之前查询的资料都是传参数的，我想传整个的。

Answer 1

你可以在父组件中定义一个Object类型的变量，然后在遍历数组时直接把该对象传递给子组件。代码如下：

<div id="one" v-for="arr in data">
    <Child :info="arr"></Child>
</div>

在子组件中定义props接收这个Object：

props: {
info: {
type: Object,
default: () => ({})
}
},

最后在子组件中使用这个对象：

<div id="address">
  <p style="float: left">{{ info.name }}</p>
  <p style="float: right">{{ info.address }}</p>
</div>