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

第九单元(非父子通信 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.vue和B.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.vue和Bb.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.vue从Aa.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.$on、this.$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的非父子组件方式，实现两个兄弟组件间的数据双向绑定。