Vue中的组件通信 简单理解

前言：

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
一般来说，组件可以有以下几种关系：

如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。

方法：$emit props

父组件 A 通过 props 的方式向子组件 B 传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现。

1.父子组件通信

父组件:

<template>
//父组件 引用子组件aaa 两种写法传递num1,num2
  <div>
   <aaa v-bind:father1="num1" :father2="num2"></aaa>
  </div>
</template>
<script>
import aaa from './aaa'
export default {
  data () {
    return {
      num1:'111',
      num2:'222',
    }
  },
  components:{
    aaa
  }
}
</script>
<style scoped>

</style>

子组件:

<template>
//两种prop接收写法，
  <div>
    <h3>子组件</h3>
    <h2>{{father1}}</h2>
    <h2>{{father2}}</h2>
  </div>
</template>
<script>
  export default {
    // props:['father1','father2']
    props:{
      father1:String,
      father2:String
    }
  }
</script>

2.子传父组件通信

父组件：

父组件
<template>
    <div id="app">
        父组件--{{msg}}
        <!--用on监听派发的事件，定义一个事件名-->
        <o-a v-on:child="showchild"></o-a>
    </div>
</template>

<script>
import oA from '@/test/A'
export default{
    data(){
        return{
            msg:'',
        }
    },
    components:{
        oA
    },
    methods:{
//      定义的事件名放在methods
        showchild(res){
            this.msg = res
        }
    }
}

</script>

<style scoped="scoped">
*{font-size: .5rem;}
</style>

子组件：

子组件
<template>
    <div id="app">
        子组件--{{name}}
        <button @click="son">子组件</button>
    </div>
</template>

<script>
export default{
    data(){
        return{
            name:'TaylorSwift'
        }
    },
    methods:{
        son(){
//          派发事件,参数
            this.$emit("child",this.name)
        }
    }
}
</script>

<style>
</style>

3.兄弟组件之间的传值

兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;
原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线。
第一种方法：eventBus

新建一个js文件， 我在这里叫做 bus.js；
文件内容：

  import Vue from 'vue';  

  export default new Vue();

然后在你需要触发的 组件中引入 import bus from '文件路径'
执行：bus.$emit('触发名称', 传输的数据 )
最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下：

  bus.$on('触发名称', res => {
    //写你需要的方法
})

第二种方法：vuex集中状态管理
　　　*vuex是vue的集中状态管理工具，对于大型应用统一集中管理数据，很方便。
　　　规范：对于多人开发的大型应用规范的制定是至关重要的，对于所有人都会接触到的vuex对其修改数据调用数据都应有一个明确严格的 使用规范。 　
　　　vuex分模块：项目不同模块间维护各自的vuex数据。
　　　
　　　限制调用：只允许action操作数据，getters获取数据，使用mapGetters，mapActions辅助函数调用数据。
　　　

组件的特点：

复用性强，维护性强，开发成本较低。

使用方式：

全局组件和局部组件

区别：

全局定义组件之后，可以在不同的vue实例中使用。
局部就只能在当前对象中使用。