深入浅析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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
jQuery简单操作cookie的插件实例
Jan 13 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
深入理解vue.js双向绑定的实现原理
Dec 05 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
VUE动态生成word的实现
Jul 26 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
PHP学习笔记之数组篇
2011/06/28 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP4和PHP5版本下解析XML文档的操作方法实例分析
2017/05/20 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
javascript基本类型详解
2014/11/28 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
JS实现颜色梯度与渐变效果完整实例
2016/12/30 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
Vue2.0 实现单选互斥的方法
2018/04/13 Javascript
如何将百度地图包装成Vue的组件的方法步骤
2019/02/12 Javascript
教大家使用Python SqlAlchemy
2016/02/12 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python多进程与服务器并发原理及用法实例分析
2018/08/21 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
在python image 中实现安装中文字体
2020/05/16 Python
python如何实现图片压缩
2020/09/11 Python
HTML中fieldset标签概述及使用方法
2013/02/01 HTML / CSS
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
端午节粽子促销活动方案
2014/02/02 职场文书
买卖协议书范本
2014/04/21 职场文书
人民调解员培训方案
2014/06/05 职场文书
委托书的写法
2014/09/16 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
2014年创卫工作总结
2014/11/24 职场文书
社区服务活动报告
2015/02/05 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby