Vue 组件&组件之间的通信 之 单向数据流
单向数据流：父组件值的更新，会影响到子组件，反之则不行；
修改子组件的值：
局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据；
如果对数据进行简单的操作，可以使用计算属性；
由效果图可知，父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错
此时代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单向数据流</title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div>
<father-component ></father-component>
</div>
</body>
<template id="father-template">
<div>
<h2> 父组件</h2>
myData:<span>{{name}}</span><br /> <input type="text" v-model="name"/>
<hr />
<child-component :name="name" ></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{name}}</span>
<input type="text" v-model="name"/> </div>
</template>
<script> new Vue({ data:{ },
components:{
"father-component":{
data(){
return{ name:'perfect', }
},
props:['msg'],
template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name']
}
}, }
} }).$mount('div');
</script>
</html>
父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错
每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
解决方法：
首先由于这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
相当于定义一个局部变量：
这样就可以不影响了；
在子组件中定义如下：
components:{
"child-component":{
template:'#child-template',
props:['name'],
data(){
return{
childName:this.name
}
}
}
进行调用的demo如下：
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{childName}}</span>
<input type="text" v-model="childName"/> </div>
</template>
2、这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
比如说小写转大写：
components:{
"child-component":{
template:'#child-template',
props:['name'],
data(){
return{
childName:this.name
}
},
computed:{//计算属性的值
childUpperName(){
return this.name.toString().toUpperCase();
}
}
}
}
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{childUpperName}}</span>
<input type="text" v-model="childUpperName"/> </div>
</template>
由图知计算属性仍然不能直接修改父组件中name的值
上述实例的总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单向数据流</title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div>
<father-component ></father-component>
</div>
</body>
<template id="father-template">
<div>
<h2> 父组件</h2>
myData:<span>{{name}}</span><br /> <input type="text" v-model="name"/>
<hr />
<child-component :name="name" ></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{childUpperName}}</span>
<input type="text" v-model="childUpperName"/> </div>
</template>
<script> new Vue({ data:{ },
components:{
"father-component":{
data(){
return{ name:'perfect', }
},
props:['msg'],
template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name'],
data(){ return{
childName:this.name
}
},
computed:{//计算属性的值 childUpperName(){
return this.name.toString().toUpperCase();
}
}
}
} }
} }).$mount('div');
</script>
</html>
单向数据流
下面介绍如何修改子组件的值同步到父组件中
单向数据流子组件数据同步到父组件
修改子组件的prop，同步到父组件：
1、使用.sync修饰符；
在子组件中写入这个函数：
//数据发生改变就会进行调用
updated(){
console.log(this.childName);
this.$emit("update:name", this.childName);
},
使用修饰符代码：
<template id="father-template">
<div>
<h2> 父组件</h2>
myData:<span>{{name}}</span><br /> <input type="text" v-model="name"/>
<hr />
<child-component :name.sync="name" ></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{childName}}</span>
<input type="text" v-model="childName"/> </div>
</template>
2、将要操作的数据封装成一个对象再操作，进行数据的双向绑定：
使用的vue代码：进行在父组件中定义一个对象user，
components:{
"father-component":{
data(){
return{
name:'perfect',
user:{
id:
}
}
},
进行调用使用：
<template id="father-template">
<div>
<h2> 父组件</h2>
name:<span>{{name}}</span><br /> <input type="text" v-model="name"/>
<hr /> userID:<span>{{user.id}}</span><br /> <input type="text" v-model="user.id"/>
<hr />
<child-component :name.sync="name" :user="user"></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{childName}}</span><br />
<input type="text" v-model="childName"/><br />
<hr />
userID:<span>{{user.id}}</span><br /> <input type="text" v-model="user.id"/> </div>
</template>
总的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单向数据流子组件数据同步到父组件</title>
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<div>
<father-component ></father-component>
</div>
</body>
<template id="father-template">
<div>
<h2> 父组件</h2>
name:<span>{{name}}</span><br /> <input type="text" v-model="name"/>
<hr /> userID:<span>{{user.id}}</span><br /> <input type="text" v-model="user.id"/>
<hr />
<child-component :name.sync="name" :user="user"></child-component>
</div>
</template>
<template id="child-template">
<div>
<p> 子组件</p>
fatherData:<span >{{childName}}</span><br />
<input type="text" v-model="childName"/><br />
<hr />
userID:<span>{{user.id}}</span><br /> <input type="text" v-model="user.id"/> </div>
</template>
<script> new Vue({ data:{ },
components:{
"father-component":{
data(){
return{ name:'perfect',
user:{ id:
} }
}, template:'#father-template', components:{
"child-component":{ template:'#child-template',
props:['name','user'],
data(){ return{
childName:this.name
}
}, //数据发生改变就会进行调用
updated(){
console.log(this.childName);
this.$emit("update:name", this.childName);
},
computed:{//计算属性的值 childUpperName(){
return this.name.toString().toUpperCase();
} }
}
} }
} }).$mount('div');
</script>
</html>
单向数据流子组件数据同步到父组件
Vue 组件&组件之间的通信 之 单向数据流的更多相关文章
- vue第九单元(非父子通信 events 单向数据流)
第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...
- vue组件父子之间相互通信案例
- Vue中组件之间的通信方式
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 本文会介绍组件间通信的8种方式如下图所示, 并介绍在不同的场景下如何选择有效方式实现的 ...
- Vue组件-组件组合
组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B. <html> <head> <title>Vue组件 A 在它 ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- linux之间进程通信
进程间通信方式: 同主机进程间数据交换机制: pipe(无名管道) / fifo(有名管道)/ message queue(消息队列)和共享内存. 必备基础: f ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- Vue.js组件之同级之间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- python3 文件读写操作中的文件指针seek()使用
python中可以使用seek()移动文件指针到指定位置,然后读/写.通常配合 r+ .w+.a+ 模式,在此三种模式下,seek指针移动只能从头开始移动,即seek(x,0) . 模式 默认 写方式 ...
- [dev][ipsec] netlink是什么
介绍: https://www.linuxjournal.com/article/7356 大纲: man手册 http://man7.org/linux/man-pages/man7/netlink ...
- 关于php得到参数数据
通过GET得到参数数据 $_SERVER['QUERY_STRING'] 获取?后面的值 $_SERVER['SCRIPT_NAME'] 获取当前脚本的路径 具体参数通过_GET['参数']获得 fi ...
- mysql_主从同步
在这里我就不说怎么搭建 Mysql 数据库了!如果有需要可以参照我前面的博文. 此博文主要说配置 Linux 数据库 主从 下面我们开始进入正题. master:192.168.31.200 ...
- mysql5.7.17版本升级源码方式及恢复主主复制
版本升级--自测 从库 ------------ 停止主从复制 stop slave 全库备份 mysqldump -u root -p -S mysql.sock --all-databases&g ...
- 理解 Memory barrier（内存屏障）无锁环形队列
原文:https://www.cnblogs.com/my_life/articles/5220172.html Memory barrier 简介 程序在运行时内存实际的访问顺序和程序代码编写的访问 ...
- Redis的数据结构之sorted-set
存储Sorted-Set Sorted-Set和Set的区别 Sorted-Set中的成员在集合中的位置是有序的 存储Sorted-set常用命令 添加元素 获得元素 删除元素 范围查询 扩展命令 z ...
- js中创建命名空间的几种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: var sayHello = function() { return 'Hel ...
- 潜在风险的频次vs潜在风险的严重影响的程度（以及恢复）
潜在风险的频次vs潜在风险的严重影响的程度 海量数据的存储对于海量数据,不要存在这样的侥幸心理,一定要好好设计你的系统.把数据增长后存储的影响降到最低.面对海量数据,鸡肋的设计必然会导致系统的崩溃. ...
- B. Lynyrd Skynyrd
传送门: 题意:给出 n,m,q 然后给出模板串,从1-n数字只出现一次,然后给出长度为m的要询问的串. q组询问:每组询问输出 ‘1’或者‘0’ 每组询问 一对x,y 问在x到y中有没有模板串 ...