<!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>
 (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)

运行后,在用户名输入,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.改正后,在组件内部再构建一套属性域,从而与外界解耦

Vue avoid mutating a prop directly since the value will be overwritten的更多相关文章

  1. [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

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...

  2. 报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren

    今天在做Vue的时候,子组件关闭的时候,报如下错误 报错:vue.esm.js?65d7:610 [Vue warn]: Avoid mutating a prop directly since th ...

  3. 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

    [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent c ...

  4. Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"

    一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...

  5. 报错:[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 bei

    项目中遇到父组件传值 activeIndex <Tabs :tabs="tabs" :activeIndex="activeIndex" >< ...

  6. Avoid mutating a prop directly since the value will be overwritten whenever the parent component re

    子组件修改父组件的值踩坑 Vue1.0升级至2.0之后,直接在子组件修改父组件的值是会报错的 目的是为了阻止子组件影响父组件的数据. 我们都知道在vue中,父组件传入子组件的变量是存放在props属性 ...

  7. Vue 报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

    场景:父组件向子组件传递数据,子组件去试图改变父组件数据的时候. 解决:子组件通过事件向父组件传递信息,让父组件来完成数据的更改. 比如:我的父组件是普通页面,子组件是弹窗的登录界面,父组件传递的数据 ...

  8. Vue 错误:Avoid mutating a prop directly

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

  9. (复习)父子组件传值使用v-modal双向绑定,报错Avoid mutating a prop directly解决方案

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

随机推荐

  1. centos8/redhat8 无法上网,通过启动systemctl start NetworkManger搞定

    在systemd里面,可以直接使用systemctl进行管理 启动:systemctl start NetworkManger 关闭:systemctl stop NetworkManager 开机启 ...

  2. 理解函数声明--signal函数的声明

    1.显示调用首地址为0的例程:(*(void(*)())0)() 显示调用首地址为0的例程的表达式为:(*(void(*)())0)() 分两步分析: 假定变量fp是一个函数指针,调用方法如下:(*f ...

  3. mysql数据库:mysql增删改、单表、多表及子查询

    一.数据增删改 二.单表查询 三.正表达式匹配 四.多表查询 五.子查询       一..数据增删改     增加  insert [into] 表名[(可选字段名)] values(一堆值1),( ...

  4. Go语言基础之Cookie和Session

    Cookie和Session Cookie和Session是Web开发绕不开的一个环节,本文介绍了Cookie和Session的原理及在Go语言中如何操作Cookie. Cookie Cookie的由 ...

  5. 2.Java NIO 简介

    概述 Java NIO 是 JDK 1.4 发布的一套全新的IO API(New IO 简称 NIO),由于 JDK 1.7 对 NIO 的更新,目前 NIO 被广泛应用,以至于 将 JDK 1.7 ...

  6. CentOS 安装 elasticsearch 注意点

    注意点: 1. 从官网下载以 rpm 结尾的软件包 7.3.1版本 下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elastic ...

  7. SparkSQL之UDF使用

    package cn.piesat.test import org.apache.spark.sql.SparkSession import scala.collection.mutable.Arra ...

  8. isset和empty以及is_null区别

    2.empty,isset首先都会检查变量是否存在,然后对变量值进行检测.而is_null 和 “参数本身”只是直接检查变量值,是否为null,因此如果变量未定义就会出现错误! 3.isset():仅 ...

  9. maven工程的简单构建

    1.按maven约定的目录结构创建文件夹 约定目录结构:不按约定的目录来建maven无法正常工作:         Hello         |---src         |---|---main ...

  10. java上传大文件解决方案

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在10G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以10G来进行限制. 第一步: 前端修改 由于项目使用的是BJ ...