单向数据流：父组件值的更新，会影响到子组件，反之则不行；
修改子组件的值：
局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据；
如果对数据进行简单的操作，可以使用计算属性；
由效果图可知，父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错
此时代码：
<!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 ...
随机推荐
-
Linux Native Aio 异步AIO的研究
Linux Native Aio 异步AIO的研究 http://rango.swoole.com/archives/282 首先声明一下epoll+nonblock从宏观角度可以叫做全异步,但从微观 ...
-
STL中的stack（堆栈）
转载:http://blog.csdn.net/morewindows/article/details/6950881 栈(statck)这种数据结构在计算机中是相当出名的.栈中的数据是先进后出的(F ...
-
pc2日记——有惊无险的第二天2014/08/29
今天下午如期的用pc2进行了第二场比赛.因为昨天的出错经历和早上充足的准备,下午的比赛尽管在開始的时候出了点小小的问题,但总的来说还是非常成功的. 早上八点过去504開始又一次配置client,由于开 ...
-
iOS开发必看的博客汇总
OneV's Den http://onevcat.com/ 沉船家园 http://beyondvincent.com/ NSHipster http://nshipster.cn/ Limboy ...
-
linux下更改时区
起因: 装系统时一走神把时区选错了,导致时间不正确,但是又不想重装,所以找了一下解决方法. 解决方案: 我的环境时这样的,其他的环境没试过. [root@werserver01 ~]# cat /et ...
-
【Php】数组遍历，foreach, each, trim()
<?php $iplist = "122.224.251.154|192.168.2.138|192.168.2.12"; echo $_SERVER['REMOTE_ADD ...
-
array_column()提取二维数组中某个值
<?php $multipleCommodity = array( =>array(), =>array() ); $arr1=array_column($multipleCommo ...
-
JS中给函数参数添加默认值
最近在Codewars上面看到一道很好的题目,要求用JS写一个函数defaultArguments,用来给指定的函数的某些参数添加默认值.举例来说就是: // foo函数有一个参数,名为x var f ...
-
Java多线程编程核心技术，第五章
1,Timer timer = new Timer(true)现在是守护进程 2,timer是按照顺的,没有异步 3,timer方法,schedule(TimerTask task, Date fir ...
-
poj3613Cow Relays
Cow Relays Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7683 Accepted: 3017 Descri ...