共计 1514 个字符，预计需要花费 4 分钟才能阅读完成。
改变了子组件中的 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 的值，并没有改变内存地址。所以不会发出警告
