Vue组件通信方式

本文主要介绍关于Vue组件通信的四种方式，分别是父向子组件通信、子向父组件通信、非父子组件的EventBus通信、Vuex状态管理

• 第一种：父组件向子组件传递数据
  父组件一共需要做4件事
  1.import son from './son.js' 引入子组件 son
  2.在components : { son } 里注册子组件
  3.在父组件的template应用子组件, <son></son>
  4.如果需要传递数据给子组件,就在template模板里写 <son :num="number"></son>

// 1.引入子组件
import son from './son'

// 2.在ccmponents里注册子组件
 components : {
   son
 }

// 3.在template里使用子组件
 <son></son>

// 4.如果需要传递数据,也是在templete里写
<son :num="number"></son>

子组件只需要做1件事：
用props接受数据,就可以直接使用数据或修改

// 用Props接受数据
props: [
 'num'
 ],

注意：若子组件接收的数据为引用类型数据并进行修改的话，父组件的值也会改变，如果想要不影响父组件，子组件可以对接收的数据进行深复制后再修改

• 第二种：子组件向父组件传递数据
  父组件一共需要做2件事情
  1. 在template里定义事件
  2. 在methods里写函数,监听子组件的事件触发

// 1. 在templete里应用子组件时,定义事件changeNumber
 <son :num="number"
   @changeNumber="changeNumber"
 >
 </son>

// 2. 用changeNumber监听事件是否触发
 methods: {
  changeNumber(val){
  console.log('子组件emit了',val);
  this.number = val
  },
 }

子组件一共需要1件事情
用$emit触发即可

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }

• 第三种: EventBus
  eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。
  但是因为是非父子组件的关系,他们需要有一个中间组件来连接。
  我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下
  使用eventBus传递数据,我们一共需要做3件事情：
  1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)
  2.在组件1里,this.$root.Bus.$emit触发事件
  3.在组件2里,this.$root.Bus.$on监听事件

// 1.在main.js里给app组件,添加bus属性
import Vue from 'vue'
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>',
 data(){
 return {
 Bus : new Vue()
 }
 }
})

// 2.在组件1里,触发emit
increment(){
 this.number++
 this.$root.Bus.$emit('eventName', this.number)
 },

// 3.在组件2里,监听事件,接受数据
mounted(){
 this.$root.Bus.$on('eventName', value => {
 this.number = value
 console.log('busEvent');
 })
},

• 第四种: Vuex状态管理
  对于比较复杂的场景可以使用Vuex，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。