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

正文

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

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

父子组件间的数据交流

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

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

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

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

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

许多人会说,这很简单!用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:

在这个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:

点击前:

点击后:

图解:

点击子组件(按钮)的时候,将父组件的名称从“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:

点击前:

点击后:

图解:

通过$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>

点击前:

点击后:

图解:

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

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

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

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

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

例如:

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

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

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

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

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

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

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

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

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

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

一点建议:

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

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

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

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

总结

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

时间: 2017-08-14

Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

vuejs动态组件给子组件传递数据的方法详解

通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component>动态组件,这个时候就没有显式的子组件标签,要给子组件传递数据需要在<component> 中进行绑定 <div class="app" id="deviceready"> <component :is="currentView" :user_name.s

vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个"子类",Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click=&

Vuejs第九篇之组件作用域及props数据传递实例详解

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc

vue组件中使用props传递数据的实例详解

在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信. 在组件中,使用选项props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字符串数组,一种是对象. 1.1 字符串数组: <div id="app4"> <my-component4 messa

vue组件之间的数据传递方法详解

(1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

Angular7中创建组件/自定义指令/管道的方法实例详解

组件 使用命令创建组件 •创建组件的命令:ng generate component 组件名 •生成的组件组成: 组件名.html .组件名.ts.组件名.less.组件名.spec.ts •在组件的控制器 @Component({ selector: 'app-heroes', templateUrl: './heroes.component.html', styleUrls: ['./heroes.component.less'] }) 手动创建组件 1.创建一个组件ts文件 2.在组件中设

vue组件中的样式属性scoped实例详解

Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素 它是通过使用PostCSS来改变以下内容实现的: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</di

Vue.js组件props数据验证实现详解

本文实例为大家分享了Vue.js组件props数据验证的具体代码,供大家参考,具体内容如下 数据验证 一般当组件需要提供给别人使用时,就需要使用数据验证. 示例: <script> Vue.component('my-component',{ props:{ //必须是数字类型 propA: Number, //必须是字符串或数字类型 propB:[String, Number], //布尔值,如果没有定义,默认值就是true propC:{ type: Boolean, default: t

Vue组件和Route的生命周期实例详解

先讲点实际的 实用点的钩子: Created:vue实例被生成后的一个生命周期钩子函数.(页面初始化数据加载一般写这里); beforeCreate:给个loading界面 created撤销loading; beforeDestory:你确认删除XX吗? destoryed:当前组件已被删除,清空相关内容 关于Vue组件生命周期,翻译后图示: module.exports = { //props: ['父组建传的值'], data:function(){ lifecycle.push("dat

Java Swing组件编程之JTable表格用法实例详解

本文实例讲述了Java Swing组件编程之JTable表格用法.分享给大家供大家参考,具体如下: 表格是GUI编程中使用较多,但也是最麻烦的一个控件之一.表格是用来显示二维数据,提供编辑,选择等功能.如果只是显示数据,这还是非常easy的,只要在JTable中传入二维数组或集合就可以了. 示例1: package awtDemo; import javax.swing.JFrame; import javax.swing.JScrollPane; import javax.swing.JTab

Vuejs 组件——props数据传递的实例代码

本篇资料来于官方文档:http://cn.vuejs.org/guide/components.html#Props 本文是在官方文档的基础上,更加细致的说明,代码更多更全. 简单来说,更适合新手阅读 props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <scr

Vuejs第十一篇组件之slot内容分发实例详解

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. Slot分发内容 ①概述: 简单来说,假如父组件需要在子组件内放一些DOM,那么这些DOM是显示.不显示.在哪个地方显示.如何显示,就是slot分发负责的活. ②默认情况下 父组件在子组件内套的内容,是不显示的. 例如代码: <