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是单项数据流,子组件不能改变父组件的状态,直接绑定会报错. 还可以这样写:但是 ...
随机推荐
- hdu 5651 重复全排列+逆元
知识点: n个元素,其中a1,a2,····,an互不相同,进行全排列,可得n!个不同的排列. 若其中某一元素ai重复了ni次,全排列出来必有重复元素,其中真正不同的排列数应为 ,即其重复度为ni! ...
- gperftools cpp wrapper
gperftools cpp wrapper // Compile command : ${CXX} -o test_profiler.elf -DUSE_GPERFTOOLS -DDEBUG -D_ ...
- 初识 vue------简单介绍
/** vue 作者:尤雨溪 类型:MVVM 准确的来说是MV框架 为什么要学习vue 1.传统的项目是通过操作dom元素来修 ...
- Linux监控服务并主动重启
Linux查询后台进程,如果没有进程号,则重启服务: #!/bin/sh basepath=$(cd ``; pwd) while true do procnum=`ps -ef|grep " ...
- beego中获取url以及参数的方式
以下都全默认在controller下执行 获取当前请求的referer fmt.Println(this.Ctx.Request.Referer()) 输出:http://localhost:8080 ...
- Linux:rm可不可以实现删除所有文件，除了demo文件
方法1: shopt -s extglob #开启扩展通配符 rm -rf !(demo) #删除除了demo的文件 方法2: find /test -not -name "demo&quo ...
- 内置函数 lambda sorted filter map 递归
一 lambda 匿名函数 为了解决一些简单的需求而设计的一句话函数 # 计算 n 的 n次方 def func(n): return n**n print(func(10)) f = lambda ...
- Cubase如何进行音频移调
- 【input】标签去除默认样式
input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
- 小程序UI设计（8）-布局分解-FlexBox的align-content应用
FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-conten ...