深入浅析Vue不同场景下组件间的数据交流


Posted in Javascript onAugust 15, 2017

正文

浅谈Vue不同场景下组件间的数据“交流” 

Vue的官方文档可以说是很详细了。在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完文档许多遍后,写起代码还是不免感到有许多困惑,因为我们不知道其中一些知识点的运用场景。这就是我写这篇文章的目的,探讨不同场景下组件间的数据“交流”的Vue实现

父子组件间的数据交流

父子组件间的数据交流可分为两种:

1.父组件传递数据给子组件

2.子组件传递数据给父组件

父组件传递数据给子组件——props

这是组件数据沟通中最常见的场景:你让父组件掌握了数据源,然后传递给子组件,供子组件使用

深入浅析Vue不同场景下组件间的数据交流

许多人会说,这很简单!用props嘛! 对,正因如此,它不是我要讲的主要内容,不过我们还是用代码简单过一遍:

父组件

<template>
 <div id="father">
 {{ '我是父组件' }}
 <son :text = "text"></son>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 text: '从父组件传来的数据'
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
</style>

子组件:

<template>
 <div>
 {{ '我是子组件,我接收了' + text }}
 </div>
</template>
<script>
export default {
 props: {
 text: { type: String, default: '' }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

demo:

深入浅析Vue不同场景下组件间的数据交流

在这个demo里面,我们把“从父组件传来的数据”这一个字符串通过props传递给了子组件 

如果我们希望在子组件中改变父组件的数据的话,可以在父组件中定义一个能改变父组件数据的函数,然后通过props将该函数传递给子组件,并在子组件在适当时机调用该函数——从而起到在子组件中改变父组件数据的效果

子组件传递数据给父组件

子组件传递数据给父组件   方式一:回调传参

父组件:

<template>
 <div id="father">
 {{ '我是父组件,名称是' + componentName }}
 <son :changeComponentName = "changeComponentName"></son>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 componentName: '组件A'
 }
 },
 methods: {
 changeComponentName: function (newComponentName) {
 this.componentName = newComponentName
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
 #father div{
 padding: 10px;
 margin: 10px;
 border: 1px solid gray;
 }
</style>

子组件:

<template>
 <div>
 <p>我是子组件:一个button</p>
 <button @click="() => changeComponentName(newComponentName)">
 把父组件的名称修改为:彭湖湾的组件
 </button>
 </div>
</template>
<script>
export default {
 data: function () {
 return {
 newComponentName: '彭湖湾的组件'
 }
 },
 props: {
 changeComponentName: {
 type: Function,
 default: () => { }
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

demo:

点击前:

深入浅析Vue不同场景下组件间的数据交流

点击后:

深入浅析Vue不同场景下组件间的数据交流

图解:

深入浅析Vue不同场景下组件间的数据交流

点击子组件(按钮)的时候,将父组件的名称从“A”修改为“彭湖湾的组件”

我们从父组件向子组件传递了一个函数(changeComponentName)。并在子组件调用这个函数的时候,以参数的形式传递了一个子组件内部的数据(newComponentName)给这个函数,这样,在父组件中定义的函数(changeComponentName)就可以取得子组件传来的参数了 

【PS】 命名太长不好意思

子组件传递数据给父组件   方式二:自定义事件

父组件:

<template>
 <div id="father">
 <div>
 {{ '我是父组件,我的名称是:' + fatherComponentName }}
 <son v-on:changeComponentName = "changeComponentName"></son>
 </div>
 </div>
</template>
<script>
import son from './son.vue'
export default {
 data: function () {
 return {
 fatherComponentName: 'A组件'
 }
 },
 methods: {
 changeComponentName: function (componentName) {
 this.fatherComponentName = componentName
 }
 },
 components: {
 son: son
 }
}
</script>
<style scoped>
 #father div{
 padding: 10px;
 margin: 10px;
 border:1px solid grey;
 }
</style>

子组件:

<template>
 <div>
 <p>我是子组件:一个按钮</p>
 <button @click="clickCallback">
 修改父组件的名称为:彭湖湾的组件
 </button>
 </div>
</template>
<script>
export default {
 data: function () {
 return {
 fatherComponentName: '彭湖湾的组件'
 }
 },
 methods: {
 clickCallback: function () {
 this.$emit('changeComponentName', this.fatherComponentName)
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 demo:

点击前:

深入浅析Vue不同场景下组件间的数据交流

点击后:

深入浅析Vue不同场景下组件间的数据交流

 图解:

深入浅析Vue不同场景下组件间的数据交流

通过$emit(event, [...参数]),所有的参数将被传递给监听器回调,也就是我们在父组件中定义的changeComponentName方法,从而实现从子组件中给父组件传参

兄弟组件间的数据交流(有共同父组件的兄弟组件)

父组件:

<template>
 <div id="father">
 <div>
 {{ '我是父组件:father' }}
 <eldest-son :text = "text"></eldest-son>
 <youngest-son :changeText="changeText"></youngest-son>
 </div>
 </div> 
</template>
<script>
import eldestSon from './eldestSon.vue'
import youngestSon from './youngestSon.vue'
export default {
 data: function () {
 return {
 text: '我是一行文本'
 }
 },
 methods: {
 changeText: function () {
 this.text = '我是经过改动的一行文本'
 }
 },
 components: {
 eldestSon: eldestSon,
 youngestSon: youngestSon
 }
}
</script>
<style>
 #father div{
 border: 1px solid grey;
 padding: 10px;
 margin: 10px;
 }
</style>

兄弟组件1:

<template>
 <div>
 <p>我是兄弟组件:eldestSon</p>
 <p>我有一个可变数据text:{{ text }}</p>
 </div>
</template>
<script>
export default {
 props: {
 text: {
 type: String,
 default: ''
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

兄弟组件2:

<template>
 <div>
 <p>我是兄弟组件:youngestSon</p>
 <button @click="changeText">更改eldestSon兄弟组件中的文本</button>
 </div>
</template>
<script>
export default {
 props: {
 changeText: {
 type: Function,
 default: () => {}
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

 点击前:

深入浅析Vue不同场景下组件间的数据交流

点击后:

深入浅析Vue不同场景下组件间的数据交流

 图解:

深入浅析Vue不同场景下组件间的数据交流

如果两个兄弟组件间存在这种数据关系的话,我们可以尝试寻找其共同的父组件,使数据和相关方法“提升”到父组件内部,并向下传给两个子组件 

这样,其中一个子组件取得了数据,另外一个子组件取得了改变数据的方法,便可以实现上述的数据沟通 

【注意】这种场景存在局限性,它要求两个组件有共同父组件。对于这种场景之外的处理方法,请看下文

全局组件间的数据交流——Vuex

我上述的许多场景里面,都运用到了props或者函数传参的方式去处理组件间的数据沟通。然而在稍大型的应用里面,它们都不约而同地给我们带来了很大的麻烦

例如:

1.通过props从父组件向子组件传递数据

对于直接的父子关系的组件,数据流显得很简洁明确,但在大型应用里面,我们上下嵌套许多个组件的时候,这就会导致我们的代码非常地繁琐,并难以维护 

2.对于没有共同的父组件的兄弟组件,函数传参的数据传递方式也无能为力了,Vue文档里介绍到,你可以通过以$emit和$on函数为基础的“事件总线”沟通数据,但它无法应对更加大型的应用 

这个时候Vuex就成为了实现全局组件间数据交流的最佳方案了

Vuex拥有一个包含全部顶层状态的单一数据源(state)

1.所有的组件都可以使用这个单一数据源里面的数据

2.所有的组件都可以通过派发 动作(actions)修改这个单一数据源里的数据 

深入浅析Vue不同场景下组件间的数据交流

原本要“走很多弯路”才能实现沟通的数据流,一下子就找到了最短的捷径 

实现View层的数据和model层的解耦

在1,2小节中处理的数据(Vue)和第三小节中处理的数据(Vuex),在很多时候是两种不同类型的数据,前者是属于View层,仅负责单纯的UI展示,而model层的大多是从后端取得后注入的数据。 

一点建议:

1.Vue部分的代码负责构建View层

2.Vuex部分的代码负责构建model层

(上述的Vue指的是Vuex之外的框架体系)

以上述两点为基础,决定某部分的代码到底要写进Vue里面还是写进Vuex里面,并尽量将两者分开,从而实现View层和model层的解耦,提高前端代码的可维护性和扩展性

总结

以上所述是小编给大家介绍的Vue不同场景下组件间的数据交流,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
JS 控件事件小结
Oct 31 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
Dec 12 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
关于vue里页面的缓存详解
Nov 04 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
React应用中使用Bootstrap的方法
Aug 15 #Javascript
JavaScript函数中的this四种绑定形式
Aug 15 #Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 #Javascript
JScript实现表格的简单操作
Aug 15 #Javascript
AngularJS日程表案例详解
Aug 15 #Javascript
jQuery实现菜单栏导航效果
Aug 15 #jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 #Javascript
You might like
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
由php中字符offset特征造成的绕过漏洞详解
2017/07/07 PHP
总结一些js自定义的函数
2006/08/05 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
分页栏的web标准实现
2011/11/01 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JavaScript类型系统之布尔Boolean类型详解
2016/06/26 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Python变量和数据类型详解
2017/02/15 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
pycharm创建一个python包方法图解
2019/04/10 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
更新pip3与pyttsx3文字语音转换的实现方法
2019/08/08 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
python可视化之颜色映射详解
2021/09/15 Python