直接修改props中的值，浏览器发出警告

2024年5月19日 156次阅读 来源: houqq

改变了子组件中的props中的值，浏览器会发出警告
在vue文档中的单向数据流也提到了

每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

在一次项目中，我直接更改了父组件传递给子组件的值。浏览器果然报错了。代码如下

父组件：

<template>
    <components :orderdata="orderdata" :is="tabCom[ind]"></components>
</template>
<script>
export default {
  data() {
    return {
        orderdata: []
    }
  }
}
</script>

子组件

<template>
    <div :key="index" class="bigbox" v-for="(item,index) of orderdata">
</template>
<script>
export default {
  props: {
    orderdata: {
      type: Array,
      required: true
  },
  methods: {
    cancelOrderlist(id) {
      this.$messagebox
        .confirm('确定取消此订单?')
        .then(action => {
          if (action === 'confirm') {
            cancelOrder(this.token, id).then(res => {
              getOrder(this.token).then(res => {
                this.orderdata = res.data.data.data // 这里直接更改props中的值，浏览器发出警告
              })
            })
          }
        })
        .catch(err => {
          if (err === 'cancel') {
          }
        })
    }
}
</script>

但是我确实需要修改props的值，并将其数据渲染给dom元素
那么解决办法就是不直接更改props的值，而是更改其引用类型，这样控制台就不会报错了。

父组件：

<template>
    <components :orderobj="orderobj" :is="tabCom[ind]"></components>
</template>
<script>
export default {
  data() {
    return {
      orderobj: {
        orderdata: []
      }
    }
  }
}
</script>

子组件

<template>
    <div :key="index" class="bigbox" v-for="(item,index) of orderobj.orderdata">
</template>
<script>
export default {
  props: {
    orderobj: {
      type: Object,
      required: true
  },
  methods: {
    cancelOrderlist(id) {
      this.$messagebox
        .confirm('确定取消此订单?')
        .then(action => {
          if (action === 'confirm') {
            cancelOrder(this.token, id).then(res => {
              getOrder(this.token).then(res => {
                this.orderobj.orderdata = res.data.data.data // 这里直接更改props中的值，浏览器发出警告
              })
            })
          }
        })
        .catch(err => {
          if (err === 'cancel') {
          }
        })
    }
}
</script>

这样就不是改变值，而是通过改变引用类型。这是因为父组件传递给子组件的是一个引用，也就是内存地址。我们改变了orderdata的值，并没有改变内存地址。所以不会发出警告

    原文作者：houqq
    原文地址: https://segmentfault.com/a/1190000017881509
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞