Vue2双向绑定报错Prop being mutated: “value“

最新推荐文章于 2024-06-22 13:12:48 发布

Tanks_Y

最新推荐文章于 2024-06-22 13:12:48 发布

阅读量562

点赞数 1

文章标签： vue.js html5 前端框架

本文链接：https://blog.csdn.net/Tanks_Y/article/details/131951182

版权

使用Vue2双向绑定时候报错

在这里插入图片描述

父组件代码

<y-search v-model="searchValue"></y-search>

子组件代码

<template>
	<view>
		<tm-search @input="$emit('input',value)" class="py-40" :round='12' v-model="value"  :showLeft="false"></tm-search>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>

造成错误原因

报错提示父组件传入的props被改变后会被覆盖。。。巴拉巴拉的，其实就是说 props 的使用不规范，我这里直接使用props里接受的value，然后同时传出去改变。

但是这是不被运行的，将传回父组件的值在data里赋值一下就可以了，处理结果如下

<template>
	<view>
		<tm-search @input="$emit('input',values)" class="py-40" :round='12' v-model="values"  :showLeft="false"></tm-search>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				values:this.value
			}
		},
		methods:{
			
		}
	}
</script>

<style>
</style>