第九单元(非父子通信 events 单向数据流)

#课程目标

  1. 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点)
  2. 了解单向数据流的含义,并且明白单向数据流的好处

#知识点

#1.非父子组件间的通信

​ 在昨天我们已经学习了父子间通信,子父间通信的实现方式,那么如果两个组件不是父子组件那么如何通信呢?

思考 Vue 中非父子组件通信的方法有哪些?

​ 常用的方法有 EventBus 和 Vuex(这里暂时先不讲vuex,之后章节将会单独讲解)

​ 那么我们通过EventBus来实现通信,这个EventBus是什么呢?

所谓EventBus就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。

更加具体的说法,通过实例化一个Vue对象( 比如bus = new Vue() )作为母线,在组件中通过事件将参数传递出去( bus.$emit(event, [...args]) ),然后在其他组件中再通过bus( 这里按照刚前面实例化Vue对象后的叫法 )来监听此事件并接受参数( bus.$on(event, callback) )

PS: 共用同一个Vue的实例( new Vue() ),通过此实例进行事件传递参数,在其他组件中监听此事件并且接收参数实现通信。

接下来将详细的讲解这个bus是如何通信的:

​ 假设我们在根组件$root中有两个兄弟组件,分别为A.vueB.vue,如果我们在A.vue有一个数据msg想要传递给B.vue

那么我们应该如何实现呢?

第一步:在根组件中实现实例化一个空的Vue对象,放到根组件中的data中。

import Vue from 'vue'
import App from './App'
import router from './router'
//实例化的空Vue对象
var bus = new Vue(); Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App),
//把bus放到根组件中的data中
data:{
bus:bus
}
})
 

那么这个时候,在任何子组件中通过this.$root.bus都能够访问到。

第二步:创建两个子组件,分别为Aa.vueBb.vue放到根组件中。

//这里是根组件
<template>
<div>
<Aa></Aa>
<Bb></Bb>
</div>
</template>
<script>
import Aa from '@/components/A'
import Bb from '@/components/B'
export default {
name: 'Ro',
data () {
return {
msg:'我是Ro'
}
},
mounted(){
////此处已经拿到了根组件中bus实例
console.log(this.$root.bus)
},
components:{
Aa,Bb
}
}
</script>
 

第三步:想要Aa.vue传递数据给Bb.vue,那么就应该在Aa.vue中触发this.$root.bus.$emit()把相应的数据传递出去。

<template>
<div>
{{msg}}
<button @click="clickeMe">点击传个123给B</button>
</div>
</template> <script>
export default {
name: 'A',
data () {
return {
msg:'我是A'
}
},
methods:{
clickeMe(){
//点击触发bus的$emit事件
this.$root.bus.$emit('sendmsg','123')
}
},
mounted(){
//此处已经拿到了根组件中bus实例
console.log(this.$root.bus)
},
components:{}
}
</script>
 

第四步:想要Bb.vueAa.vue,那么就应该在Bb.vue中监听this.$root.bus.$on()把相应的数据传拿到当前组件中。

<template>
<div>
{{msg}}
--
{{msg1}}
</div>
</template>
<script>
export default {
name: 'B',
data () {
return {
msg:'我是B',
msg1:'我是B未改变的数据'
}
},
mounted(){
//此处已经拿到了根组件中bus实例
console.log(this.$root.bus)
//此处监听Aa.vue传递过来的参数 并且赋值给当前组件的 msg1
this.$root.bus.$on('sendmsg',(data)=>{
this.msg1 = data;
})
},
beforeDestroy(){
//在组件销毁时别忘了解除事件绑定
this.$root.bus.$on('sendmsg');
}
}
</script>
 

这样就可以了,是不是很简单?

如果有多个组件组件需要通信,是不是要在根组件上多建几个bus

这个当然不需要的,只要保证事件名(eventName)不一样就行了。

为什么要弄个 bus?直接this.$root.$onthis.$root.$emit不更简单粗暴?

因为专门用一个空的 Vue 实例(bus)来做中央事件总线更加清晰也易于管理。

#2.单向数据流

为什么是单向数据流?

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

这里有两种常见的试图改变一个 prop 的情形:

  1. 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:

    props: ['initialCounter'],
    data: function () {
    return {
    counter: this.initialCounter
    }
    }
     
  2. 这个 prop 以一种原始的值传入且需要进行转换。在这种情况下,最好使用这个 prop 的值来定义一个计算属性:

    props: ['size'],
    computed: {
    normalizedSize: function () {
    return this.size.trim().toLowerCase()
    }
    }
     

#授课思路

#案例和作业

使用EventBus的非父子组件方式,实现两个兄弟组件间的数据双向绑定。

vue第九单元(非父子通信 events 单向数据流)的更多相关文章

  1. Vue 组件&组件之间的通信 之 单向数据流

    单向数据流:父组件值的更新,会影响到子组件,反之则不行: 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据: 如果对数据进行简单的操作,可以 ...

  2. vue之非父子通信

    一.非父子通信: 思路: 找个中间存储器,组件一把信息放入其中,组件二去拿 代码如下: let hanfei = new Vue();  # 实列化个空的vue对象,作为中间存储器来时间        ...

  3. vue.js 创建组件 子父通信 父子通信 非父子通信

    1.创建组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  4. Vue兄弟组件(非父子组件)状态共享与传值

      前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~  内容里的<br> ...

  5. NO17--vue父子组件间单向数据流的解决办法

    在上一篇中讲解了父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告. ...

  6. Vue 非父子组件通信方案

    Vue 非父子组件通信方案 概述 在 Vue 中模块间的通信很普遍 如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...

  7. vue父子组件及非父子组件通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  8. Vue父子组件及非父子组件如何通信

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...

  9. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

随机推荐

  1. uniapp兄弟组件如何修改数据?一看就废!

    1. 如A组件里有个num = 10 并需要在生命周期函数created里通过uniapp提供的uni.$on方法来注册全局事件,并加一个形参.( uni.$on( '自定义事件名') , 形参 =& ...

  2. [工具推荐]制作基于Dash的本地文档方便搜索文档api和内容

    [版权声明]:本文章由danvid发布于http://danvid.cnblogs.com/,如需转载或部分使用请注明出处 最近在看es的文档,发现查起api来真的很麻烦,很多现在开源的文档都没有查询 ...

  3. 顺序结构(C语言基本结构)

    顺序结构 1.基本概念 语句执行的顺序与顺序程序书写的顺序一致 特点 a.程序执行的顺序和语句书写的顺序一致 b.有一个数据入口,一个数据出口 顺序结构与四则运算 顺序结构是C语言的基本结构 程序由上 ...

  4. Lsi卡和IB卡在CentOS中升级

    LSI 9271 步骤1:准备升级工具和固件包 rpm -ivh MegaCli-8.07.14-1.noarch.rpm [root@phegdata01 ~]# unzip 23-34-0-000 ...

  5. Verilog 分频器

    verilog设计进阶 时间:2014年5月6日星期二 主要收获: 1. 自己动手写了第一个verilog程序. 题目: 利用10M的时钟,设计一个单周期形状如下的周期波形. 思考: 最开始的想法是: ...

  6. JZOJ2020年10月5日提高B组反思

    2020年10月5日提高B组反思 T1 考试的时候想简单了 觉得把跟没有攻占的点相连的边留下就可以了 没有考虑到最小 WA&RE 10 T2 没有思路 就直接从中间往后枚举分解处 蜜汁错误 W ...

  7. PyQt(Python+Qt)学习随笔:QDockWidget停靠部件的dockWidgetArea和docked属性

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 dockWidgetArea和docked属性这两个属性在Design ...

  8. 第二十三章、 Model/View便利类表格部件QTableWidget详解

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 表格部件为应用程序提供标准的表格显示工具,在表格内可以管理基于行和列的数据项,表格中的最大 ...

  9. 第十七章、Model/View开发:QListView的功能及属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.概述 QListView是从QAbstractItemView 派生的类,实现了QAbstrac ...

  10. PyQt(Python+Qt)学习随笔:QTreeView树形视图的headerHiden属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTreeView树形视图的headerHiden属性用于控制视图中是否隐藏标题,为True隐藏,否 ...