vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定
vue2.0 禁止 子组件修改父组件数据
在Vue2中组件的props的数据流动改为了只能单向流动，即只能由组件外（调用组件方）通过组件的DOM属性attribute传递props给组件内，组件内只能被动接收组件外传递过来的数据，并且在组件内，不能修改由外层传来的props数据。
在Vue2.0中，实现组件属性的双向绑定方式
1. 在组件内的data对象中创建一个props属性的副本
因为result不可写，所以需要在data中创建一个副本myResult变量，初始值为props属性result的值，同时在组件内所有需要调用props的地方调用这个data对象myResult。
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//data中新增字段
};
},
......
});
2. 创建针对props属性的watch来同步组件外对props的修改
此时在组件外（父组件）修改了组件的props，会同步到组件内对应的props上，但是不会同步到你刚刚在data对象中创建的那个副本上，所以需要再创建一个针对props属性result的watch（监听），当props修改后对应data中的副本myResult也要同步数据。
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result
};
},
watch: {
result(val) {
this.myResult = val;//新增result的watch，监听变更并同步到myResult上
}
},
......
3. 创建针对props副本的watch，通知到组件外
此时在组件内修改了props的副本myResult，组件外不知道组件内的props状态，所以需要再创建一个针对props副本myResult，即对应data属性的watch。
在组件内向外层（父组件）发送通知，通知组件内属性变更，然后由外层（父组件）自己来变更他的数据
最终全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<switchbtn :result="result" @on-result-change="onResultChange"></switchbtn>
<input type="button" value="change" @click="change">
</div> <script>
Vue.component("switchbtn", {
template: "<div @click='change'>{{myResult?'开':'关'}}</div>",
props: ["result"],
data: function () {
return {
myResult: this.result//第一步:建props属性result的副本--myResult
};
},
watch: {
result(val) {
this.myResult = val;//第二步:监听外部对props属性result的变更，并同步到组件内的data属性myResult中
},
myResult(val){
this.$emit("on-result-change",val);//第三步:组件内对myResult变更后向外部发送事件通知
}
},
methods: {
change() {
this.myResult = !this.myResult;
}
}
}); new Vue({
el: "#app",
data: {
result: true
},
methods: {
change() {
this.result = !this.result;
},
onResultChange(val){
this.result=val;//第四步:外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
}
}
});
</script>
</body>
</html>
至此，实现了组件内数据与组件外的数据的双向绑定，组件内外数据的同步。最后归结为一句话就是：组件内部自己变了告诉外部，外部决定要不要变。
.
vue2.X props 数据传递 实现组件内数据与组件外的数据的双向绑定的更多相关文章
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- iview库表table组件内嵌套Select组件
表格内render函数渲染Select组件 { title: '属性值', key: 'values', render:(h,params)=>{ return h('Select',{ ...
- Vue2.0 【第三季】第1节 propsData Option 全局扩展的数据传递
目录 Vue2.0 [第三季]第1节 propsData Option 全局扩展的数据传递 第1节 propsData Option 全局扩展的数据传递 Vue2.0 [第三季]第1节 propsDa ...
- vue 2.x之组件的数据传递（一）
这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...
- 浅入深出Vue：子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- Angular06 组件、模块、父子组件之间的数据传递
1 创建组件 进入到angular项目的根目录,执行如下命令 ng g component test-component 注意:执行完上述命令后在angular项目的src/app文件夹下就会多出一个 ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- react生命周期，中间件、性能优化、数据传递、mixin的使用
https://github.com/lulujianglab/blog/issues/34 一.生命周期 1,初始化的执行顺序,初始生命周期执行过程详解 class initSate extends ...
- OpenGL 笔记<3> 数据传递 一
Sending data to a shader using vertex attributes and vertex buffer object 上次我们说到着色器的编译和连接,后面的事情没有做过多 ...
随机推荐
- line-height与vertical-align
css世界读书笔记: 内联元素与流 块级元素负责结构,内联元素接管内容 x元素的下边缘就是我们的基线baseline x-height就是x的高度 vertical-align:middle是x中点位 ...
- Mysql 死锁
http://www.cnblogs.com/benshan/archive/2013/05/09/3068886.html 声明:以下讨论只是针对InnoDB存储引擎. 何为死锁? 死锁是对资源 ...
- 二叉树节点个数，叶子个数，第K层个数，最低公共节点
1. 节点个数 function getNodeNum(root){ if(root == null){ return 0; } //+1为root的计数 return getNodeNum(root ...
- xtrabackup安装使用说明
软件介绍: Percona XtraBackup是一块开源且免费的对MySQL Innodb存储引擎备份数据的工具,使用此工具的时候不需停止MySQL,而且支持压缩备份,支持对Innodb存储引擎做增 ...
- GROUP BY子句的查询中显示COUNT()为0的结果
含有GROUP BY子句的查询中如何显示COUNT()为0的结果 在SQL Server数据库查询中,为了对查询结果进行对比.分析,我们经常会用到GROUP BY子句以及COUNT()函数来对查询结果 ...
- g2o初始化一些
今天看了一下智能指针的东西,发现更简单的思路: 就是Block和solver构造时,需要传递unique_ptr,那我们将普通指针转换成unique_ptr不就可以了么: // 初始化g2o //第一 ...
- 如何清除全部的NSUserDefaults储存的数据。
今天做项目遇到,如何清除全部的NSUserDefaults储存的数据. 方法1:找到所有的key然后remove掉 代码: [objc] view plain copy /** * 清除所有的存储本地 ...
- PHP-CI框架数据库连接默认是长连接,需要注意应用场景
在CI框架的数据库配置文件中$db['default'] ['pconnect'] = TRUE,永久的数据库连接是指在您的脚本结束运行时不关闭的连接. 当收到一个永久连接的请求时,PHP将检查是否已 ...
- NKOI 1469 通向自由的钥匙
P1469通向自由的钥匙 时间限制 : 10000 MS 空间限制 : 65536 KB 问题描述 通向自由的钥匙被放n个房间里,这n个房间由n-1条走廊连接.但是每个房间里都有特别的保护魔法,在 ...
- 【POJ1067】取石子游戏（威佐夫博弈）
题意:有两堆石子,数量任意,可以不同.游戏开始由两个人轮流取石子. 游戏规定,每次有两种不同的取法,一是可以在任意的一堆中取走任意多的石子:二是可以在两堆中同时取走相同数量的石子. 最后把石子全部取完 ...