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

改变了子组件中的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的值，并没有改变内存地址。所以不会发出警告