Vue avoid mutating a prop directly since the value will be overwritten

最新推荐文章于 2024-08-20 11:34:09 发布

quanwuhui

最新推荐文章于 2024-08-20 11:34:09 发布

阅读量2.6w

点赞数

分类专栏： Js 文章标签： vue javascript mutating login

本文链接：https://blog.csdn.net/quanwuhui/article/details/56675407

版权

Js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习Vue,从官方文档开始。看了半天不过瘾,决定实现一个登陆组件。开始代码如下:

js代码（v1.js）

(function(w) {
	Vue.component('login', {
		props: ['uName', 'uPwd'],
		template: '<section class="login">' +
			'<div class="form-group"><label>用户名</label><input id="txtUser" v-model="uName"/></div>' +
			'<div class="form-group"><label>密码</label><input id="txtPwd" type="password" v-model="uPwd"/></div>' +
			'<div class="form-group"><input type="submit" value="提交" v-bind:disabled="btndisable"/></div></section>',
		computed:{
			btndisable:function(){
				return (this.uName||'').length>0&&(this.uPwd||'').length>0?false:true;
			}
		}
	});
	new Vue({
		el: '#form'
	})
})(window)

html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue Learn</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		
	</head>
	<body>
		<form id="form" method="post">
			<login></login>
		</form>
		<script src="./js/vue/v1.js"></script>
	</body>
</html>

运行后,在用户名输入,console界面中弹出警告:

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: "uName" 。

改为:

(function(w) {
	Vue.component('login', {
		props: ['uName', 'uPwd'],
		template: '<section class="login">' +
			'<div class="form-group"><label>用户名</label><input id="txtUser" v-model="name"/></div>' +
			'<div class="form-group"><label>密码</label><input id="txtPwd" type="password" v-model="pwd"/></div>' +
			'<div class="form-group"><input type="submit" value="提交" v-bind:disabled="btndisable"/></div></section>',
		data:function(){
			return {
				name:"",
				pwd:""
			}
		},
		computed:{
			btndisable:function(){
				return (this.name||'').length>0&&(this.pwd||'').length>0?false:true;
			}
		}
	});
	new Vue({
		el: '#form'
	})
})(window)

运行OK,没有警告。

总结：

1.v-model 默认是双向绑定,开始时使用默认属性uName 双向绑定,意味着存在,组件内部修改uName,从而影响外部组件的风险。

2.改正后,在组件内部再构建一套属性域,从而与外界解耦