潜渊者 2023-02-03 16:04 采纳率: 70.7%
浏览 35
已结题

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

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

   <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里,之前查询的资料都是传参数的,我想传整个的。

  • 写回答

2条回答 默认 最新

  • 程序员星辰 2023-02-03 16:29
    关注

    你可以在父组件中定义一个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>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 2月25日
  • 已采纳回答 2月17日
  • 创建了问题 2月3日

悬赏问题

  • ¥15 Python题,根本不会啊
  • ¥15 Python题,不会啦
  • ¥15 LD衰减结果文件dist的单位?
  • ¥15 Python题,回答一下下啦
  • ¥15 利用Java语言结合数据库实现-个信息管理系统(如学生管理系统、图书管理系统(可以加上借书还书等功能等)或者小游戏
  • ¥15 会会信号与系统和python的来
  • ¥15 关于#python#的问题
  • ¥20 oracle RAC 怎么配置啊,配置
  • ¥15 excel 日常使用中出现问题
  • ¥20 pdusession建立失败