VUE报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent及解决方案

VUE报错：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "topActive"

大概意思是：避免直接改变属性，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于属性值的数据或计算属性。通过props传递给子组件的topActive，不能在子组件内部修改props中的topActive值。

<van-tabs class="top-tab" v-model="topActive" v-if="topData" @click="topChange" title-active-color="#fc5c5c" color="#fc5c5c" > <van-tab v-for="(items, key) in topData" :key="key" :title="items.title" :name="items.key" /> </van-tabs> <script> export default { name: 'ChartTab', props: { topData: Array, topActive: { type: String, required: true, }, }, } </script>

修改：不直接使用该参数 通过temp接收该props中的参数 使用temp

<van-tabs class="top-tab" v-model="activeTopTemp" v-if="topData" @click="topChange" title-active-color="#fc5c5c" color="#fc5c5c" > <van-tab v-for="(items, key) in topData" :key="key" :title="items.title" :name="items.key" /> </van-tabs> <script> export default { name: 'ChartTab', props: { topData: Array, topActive: { type: String, required: true, }, }, data() { return { // 避免直接修改props activeTopTemp: this.topActive, } }, } </script>

扩展：

v-model通常用于input的双向数据绑定 <input v-model="parentMsg">，也可以实现子组件到父组件数据的双向数据绑定

:model是v-bind:model的缩写

<child :model="msg"></child>这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。

引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

解决vue 子组件修改父组件传来的props值报错问题

报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-

v-model和:model的区别

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11131.html