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是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...
随机推荐
- C# 操作地址 从内存中读取写入数据(初级)
本示例以植物大战僵尸为例, 实现功能为 每1秒让阳光刷新为 9999.本示例使用的游戏版本为 [植物大战僵尸2010年度版], 使用的辅助查看内存地址的工具是 CE. 由于每次启动游戏, 游戏中阳光 ...
- mvc验证码图片生成
/// <summary> ///生成验证码 /// </summary> public class VerifyCode { /// <summary> /// ...
- Flask：上下文管理
1. werkzurg from werkzur.serving import run_simple def run(environ,start_response): reuturn [b'hello ...
- JavaScript例子2-使一个特定的表格隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- SQL的GROUP BY 与 Order By
1.概述 “Group By”从字面意义上理解就是根据“By”指定的规则对数据进行分组,所谓的分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.原始表 3.简 ...
- app嵌套的vue项目更新后，页面没有更新
记录下解决过程 1.index.html增加下面meta标签 <meta http-equiv="pragram" content="no-cache"& ...
- pyqt5 中的addStretch
一直对addStretch感觉怪怪的,直到看见了下面这段话: addStretch()函数用于在控件按钮间增加伸缩量, 伸缩量的比例为1:1:1:6,意思就是将控件以外的空白地方按设定的比例等分为9份 ...
- tftp client命令示例
tftp 192.168.1.1 -c put myfile theirfile tftp 192.168.1.1 -m binary -c put myfile theirfile The tftp ...
- 一篇文章让你彻底明白__getattr__、__getattribute__、__getitem__的用法与执行原理
__getattr__ 在Python中,当我们试图访问一个不存在的属性的时候,会报出一个AttributeError.但是如何才能避免这一点呢?于是__getattr__便闪亮登场了 当访问一个不存 ...
- 网络基础篇之HDLC、PPP（原理）
一.广域网传输 之前讲解的都是关于局域网的数据传输,这次讲解的是广域网的传输. 广域网简称WAN,是一种跨越超大的.地域性的计算机网络集合.通常跨省.市.甚至一个国家.广域网包括很多子网,子网可以是局 ...