疑惑：vue3使用props传递数据的时候，该属性是一个对象，实际情况下，到底推不推荐在子组件直接修改对象内部的属性？

  • Z时代
  • 2024-02-28
  • 分类：IT

假如父组件中是这样一个复杂的对象，传递给多个子组件，不同子组件要处理该修改中不同的属性，我目前的处理是直接在子组件中修改如props.params.approveStatus = 2，当然官方并不推荐这种处理，实际情况如何处理更好一些呢？

const params = ref<any>({
    approveStatus: 0,
    attachment: [],
    bidDeadline: '',
    bidFileValid: 0,
    bidId: null,
    bidMode: '',
    bidNo: '',
    bidScope: '',
    bidScopeAttachment: [],
    bidStage: 'initiate',
    bidTitle: '',
    buyMode: 1,
    contact: '',
    createBy: '',
    createTime: '',
    enterpriseId: 0,
    flag: 0,
    inquiryMethod: '',
    inquiryMethodAttachment: [],
    instanceId: 0,
    labelType: 0,
    promoterUserId: 0,
    promoterUserName: '',
    remark: '',
    requestionDeadline: '',
    sampleMode: 1,
    status: 0,
    supplierRecommenderId: null,
    supplierRecommenderName: '',
    technicalStandard: '',
    technicalStandardAttachment: [],
    updateBy: '',
    updateTime: '',
    valid: ''
  })

回答：

你这种多组件处理同一对象的情况，可以使用Pinia来做啊。

// 定义store
const useParamsStore = defineStore();
// 在每个组件里面直接使用
const params = useParamsStore()

回答：

正如官网所说的那样：

更改对象 / 数组类型的 props

当对象或数组作为 props 被传入时，虽然子组件无法更改 props 绑定，但仍然可以更改对象或数组内部的值。这是因为 JavaScript 的对象和数组是按引用传递，而对 Vue 来说，禁止这样的改动，虽然可能生效，但有很大的性能损耗，比较得不偿失。

这种更改的主要缺陷是它允许了子组件以某种不明显的方式影响父组件的状态，可能会使数据流在将来变得更难以理解。在最佳实践中，你应该尽可能避免这样的更改，除非父子组件在设计上本来就需要紧密耦合。在大多数场景下，子组件应该抛出一个事件来通知父组件做出改变。

官方也是说了，在最佳实践中应尽可能避免，但也要根据你的业务需求来决定。

我前不久有个跟你差不多的需求，列表里一个数据，进行比如停用/启用操作，我的子组件是专门服务于这种情况的，然后在调用接口成功后直接更改props.xxx.status里参数的状态，因为需求是需要无感刷新，且这种情况应该是属于父子组件紧密耦合的状态。

回答：

实际使用还是不推荐，
这样破坏了单向数据流 ，随着组件变得复杂，你传入的数据在什么时候被组件内部改变了，你都不知道，可能导致一些难以发现的bug.
当你要在组件内部更改时，建议用emit到组件外部更改

const emit = defineEmits(['update:params'])
emit('update:params',val)
<template>
    <A v-model:params="params"></A>
</template>

回答：

渲染框架都推荐单向数据流，目的是比较好追踪数据的改动

处理就是父组件封装接口修改数据，然后父组件进行自定义事件监听，子组件需要修改数据的时候进行emit

以上是 疑惑：vue3使用props传递数据的时候，该属性是一个对象，实际情况下，到底推不推荐在子组件直接修改对象内部的属性？ 的全部内容， 来源链接： utcz.com/p/935039.html

回到顶部