父组件传递复杂参数给子组件

本文讨论了在Web开发中,如何通过父组件将必要的数据以Props的形式传递给子组件,减少服务器请求次数,降低页面数据冗余,特别适用于审核类应用场景下的弹窗功能如add-or-update组件的实现.
摘要由CSDN通过智能技术生成

为了减少和服务器端的交付次数,减少页面数据的冗余,尽可能一次取出数据,在各个子组件之间共享。

父组件,调用子组件时加上Props,发送数据,可以发送多组数据,作为对象:

 <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList" :custInfo="dCust" :houseInfo="dHouse"></add-or-update>


子组件收数据:


const props = defineProps({
  custInfo: {
    type: Object,
    default: () => {
      return {}
    }
  },
  houseInfo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

在审核类的应用场景经常用到

  • 10
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 3 中,子组件修改组件复杂数据可以通过使用自定义事件来实现。下面是一种常见的方法: 1. 在组件中定义一个复杂数据对象。例如,我们定义一个名为 "dataObj" 的对象: ```javascript <template> <div> <h2>组件</h2> <p>{{ dataObj.name }}</p> <child-component :childData="dataObj" @updateData="updateDataObj" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { dataObj: { name: 'John', age: 25, // 其他属性... }, }; }, methods: { updateDataObj(updatedData) { this.dataObj = updatedData; }, }, }; </script> ``` 2. 在子组件中,通过 `$emit` 方法触发一个自定义事件来发送修改后的数据给组件: ```javascript <template> <div> <h3>子组件</h3> <input v-model="childData.name" type="text" /> <button @click="updateParentData">保存</button> </div> </template> <script> export default { props: ['childData'], methods: { updateParentData() { this.$emit('updateData', this.childData); }, }, }; </script> ``` 在这个例子中,子组件中的输入框绑定了组件传递过来的 `childData.name` 属性。当用户在子组件中修改输入框的值后,点击保存按钮会触发 `updateParentData` 方法,该方法通过 `$emit` 方法触发了名为 "updateData" 的自定义事件,并将 `childData` 作为参数传递组件。 在组件中,我们通过 `@updateData="updateDataObj"` 监听了子组件发出的 "updateData" 事件,并将其绑定到 `updateDataObj` 方法上。当子组件触发了 "updateData" 事件时,`updateDataObj` 方法会被调用,将子组件修改后的数据更新到组件的 `dataObj` 中。 这样,子组件就可以修改组件复杂数据了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值