Vue_(组件通讯)单项数据流
Vue单项数据流 传送门
单向数据流：父组件值的更新，会影响到子组件，反之则不行
修改子组件的值：
局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据
如果对数据进行简单的操作，可以使用计算属性
修改子组件的prop，同步到父组件：
使用.sync修饰符
将要操作的数据封装成一个对象再操作
单单项数据流设计原则：
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
Learn
一、单项数据流
二、单项数据流子组件数据同步到父组件
目录结构
【每个demo下方都存有html源码】
一、单项数据流
实现父组件属性值刷新子组件属性值两种方法，在子组件"child-component" 下定义两个方法获取父组件的文本
data(){
return {
childName : this.name
}
},
computed : {
childUpperName(){
return this.name.toString().toUpperCase();
}
}
<script type="text/javascript">
new Vue({
data : {
msg : 'helloVue'
},
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
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("#GaryId");
</script>
Vue.js
在子组件中通过v-model绑定childUpperName方法将父组件的文本内容覆盖到子组件当中
this.name.toString().toUpperCase()中toUpperCase() 把字符串转换成大写
<body>
<div id="GaryId">
<father-component ></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
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>
<h2>child component</h2>
fatherData : <span>{{childUpperName}}</span><br />
<input type="text" v-model="childUpperName"/><hr />
</div>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component ></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
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>
<h2>child component</h2>
fatherData : <span>{{childUpperName}}</span><br />
<input type="text" v-model="childUpperName"/><hr />
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : {
msg : 'helloVue'
},
components : {
"father-component" : {
data(){
return {
name : 'Gary'
}
},
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("#GaryId"); </script>
</html>
Gary_one-Way Data Flow.html
二、单项数据流子组件数据同步到父组件 .sync修饰符传送门
在<template id="father-template">中添加.sync修饰符
修改子组件中的数据将会同步到父组件
<child-component :name.sync="name" :user="user"></child-component>
<body>
<div id="GaryId">
<father-component ></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
name : <span>{{name}}</span><br />
<input type="text" v-model="name"/><br />
userID : <span>{{user.id}}</span><br />
<input type="text" v-model="user.id"/><br /> <hr />
<child-component :name.sync="name" :user="user"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{childName}}</span><br />
<input type="text" v-model="childName"/><br /> userID : <span>{{user.id}}</span><br />
<input type="text" v-model="user.id"/><br />
<hr />
</div>
</template>
在子组件的props中进行属性注册props : ['name', 'user']
new Vue({
data : {
msg : 'helloVue'
},
components : {
"father-component" : {
data(){
return {
name : 'Gary',
user : {
id : 1
}
}
},
props : ['msg'],
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
props : ['name', 'user'],
data(){
return {
childName : this.name
}
},
computed : {
childUpperName(){
return this.name.toString().toUpperCase();
}
},
updated(){
this.$emit('update:name', this.childName);
}
}
}
}
}
}).$mount("#GaryId");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gary</title>
</head>
<body>
<div id="GaryId">
<father-component ></father-component>
</div>
</body> <template id="father-template">
<div>
<h1>father component</h1>
name : <span>{{name}}</span><br />
<input type="text" v-model="name"/><br />
userID : <span>{{user.id}}</span><br />
<input type="text" v-model="user.id"/><br /> <hr />
<child-component :name.sync="name" :user="user"></child-component>
</div>
</template> <template id="child-template">
<div>
<h2>child component</h2>
fatherData : <span>{{childName}}</span><br />
<input type="text" v-model="childName"/><br /> userID : <span>{{user.id}}</span><br />
<input type="text" v-model="user.id"/><br />
<hr />
</div>
</template> <script type="text/javascript" src="../js/vue.js" ></script>
<script type="text/javascript"> new Vue({
data : {
msg : 'helloVue'
},
components : {
"father-component" : {
data(){
return {
name : 'Gary',
user : {
id : 1
}
}
},
props : ['msg'],
template : "#father-template",
components : {
"child-component" : {
template : "#child-template",
props : ['name', 'user'],
data(){
return {
childName : this.name
}
},
computed : {
childUpperName(){
return this.name.toString().toUpperCase();
}
},
updated(){
this.$emit('update:name', this.childName);
}
}
}
}
}
}).$mount("#GaryId"); </script>
</html>
Gary_one-Way Data Flow_02.html
Vue_(组件通讯)单项数据流的更多相关文章
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- Vue_(组件通讯)使用solt分发内容
Vue特殊特性slot 传送门 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title</h1> </com-a> 如果想 ...
- Vue_(组件通讯)子组件向父组件传值
Vue组件 传送门 子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: ...
- Vue_(组件通讯)父组件向子组件传值
Vue组件 传送门 父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 1.定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件 2.准备获取数据:c ...
- Vue_(组件通讯)父子组件简单关系
Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...
- Vue_(组件通讯)动态组件结合keep-alive
keep-alive 传送门 <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive ...
- Vue_(组件通讯)动态组件
动态组件 传送门 在一个元素上挂载多个组件,根据不同状态进行切换的时候,可以使用动态组件 动态组件的使用:需要使用内置组件<component></component>,根据 ...
- Vue_(组件通讯)组件
Vue组件 传送门 组件Component,可扩展HTML元素,封装可重用的代码.通俗的来说,组件将可重用的HTML元素封装成为标签方便复用: 组件的使用: 使用全局方法Vue.extend创建构造器 ...
- Vue组件中的单项数据流
当子组件中的input v-model 父组件的值时不能直接绑定props的值要使用计算属性,向下面的写法,因为props是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...
随机推荐
- AutoCAD2013 以上利用AccoreConsole+ c# NetApi Windows Froms 封装
1# 封装类 public static class CmdHelper { /// <summary> /// 调用AutoCAD 安装目录下的AccoreConsole.exe来实现批 ...
- windows安装npm教程
1.在使用之前,先类掌握3个东西,明白它们是用来干什么的: npm: nodejs 下的包管理器. webpack: 它主要用途是通过CommonJS 的语法把所有浏览器端需要发布的静态资源作相应的 ...
- CSS 小工具集
http://www.colorzilla.com/gradient-editor/css渐变生成工具.http://linxz.github.io/tianyizone/css志爷小工具.http: ...
- Pytorch中nn.Dropout2d的作用
Pytorch中nn.Dropout2d的作用 首先,关于Dropout方法,这篇博文有详细的介绍.简单来说, 我们在前向传播的时候,让某个神经元的激活值以一定的概率p停止工作,这样可以使模型泛化性更 ...
- std::list保存大量数据时，类型即是无析构函数，该list析构时会占用大量CPU
std::list保存大量数据时,类型即是无析构函数,该list析构时会占用大量CPU
- Windows环境用Xampp自制证书(certificate), Chrome(版本 60.0.3112.90通过)
标题: Self signed certificate no longer valid as of Chrome 58(Chrome58以后自制证书不再有效)原文地址: https://github. ...
- Tomcat设置默认启动项目
Tomcat设置默认启动项目 Tomcat设置默认启动项目,顾名思义,就是让可以在浏览器的地址栏中输入ip:8080,就能访问到我们的项目.具体操作如下: 1.打开tomcat的安装根目录,找 ...
- Oracle笔记（一） Oracle简介及安装
一.轨迹 二.Oracle简介 Oracle是现在全世界最大的数据库提供商,编程语言提供商,应用软件提供商,它的地位等价于微软的地位. Oracle在古希腊神话中被称为“神谕”,指的是上帝的宠儿,在中 ...
- linux学习笔记七
#文件权限很重要,有些时候删除和新建文件没有权限根本操作不了,linux一切皆是文件,所以必须得了解下权限了. 文件的一般权限 简单的ls -ld 命令就能看到权限,dr-xr-x---补全应该是dr ...
- bom and dom
bom:Broswer Object Model: 浏览器对象模型- navigator: 获取客户机的信息(浏览器的信息)document.write(navigator.appName);- sc ...