vue1和vue2组件通信

1. 父组件向子组件通信

props属性（vue1.x和vue2.x ）

//父组件

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello from-father="I am from father"></hello>
  </div>
</template>
<script>
import Hello from './components/Hello'
export default {
  components: {
    Hello
  }
}

//子组件

<template>
  <div class="hello">
    <h1>{{ fromFather }}</h1>
  </div>
</template>
<script>
export default {
  props: ["fromFather"],
  data () {
    return {
    }
  }
}

2. 子组件向父组件通信：

2.1 $emit()触发事件，$on()监听事件（vue1.x和vue2.x ）

//父组件

<template>
  <div class="hello">
    <hello-world @child-click="receiveData"></hello-world>
  </div>
</template>
<script>
  import HelloWorld from './HelloWorld.vue'
  export default {
    name: 'Home',
    components: {HelloWorld},
    data () {
      return {
      }
    },
    methods:{
      receiveData(data){
        console.log(data); //I am from child
      }
    },
  }
</script>

//子组件

<template>
  <div class="hello">
    <button @click="onClick">Click</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  methods:{
    onClick(){
      this.$emit('child-click', 'I am from child');
    }
  },
}},
}

 在子组件向父组件通信借助了事件$emit() ，子组件在click事件里面：
this.$emit('child-click', 'I am from child');，传递了事件名称 "child-click" 和参数 “I am from child” 给父组件，在父组件中打印出来

3. $dispatch 和 $broadcast（vue 1.x ）

向上派发事件 和 向下广播事件; vue 2.x中已经弃用

$dispatch:

 派发事件，首先在实例上触发它，然后沿着父链向上冒泡在触发一个监听器后停止，除非它返回 true。

$broadcast:

 广播事件，通知给当前实例的全部后代。因为后代有多个枝杈，事件将沿着各“路径”通知。每条路径上的通知在触发一个监听器后停止，除非它返回 true。
//父组件

<template>
  <div id="app">
    <img class="logo" src="./assets/logo.png">
    <hello></hello>
    <button @click="clickBtn">点击</button>
  </div>
</template>
<script>
import Hello from './components/Hello'
export default {
  components: {
    Hello
  },
  created () {
    this.$on("son-dispatch", function (data) {
      console.log(data);
    })
  },
  methods:{
    clickBtn(){
      this.$broadcast("father-broadcast","I ma from father")
    }
  },
}

//子组件

<template>
  <div class="hello">
    <button @click="clickBtn">点击</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello World!'
    }
  },
  created(){
    this.$on("father-broadcast",function (data) {
      console.log(data);
    })
  },
  methods:{
    clickBtn (){
      //派发事件
      this.$dispatch("son-dispatch","I am from son")
    },
  },
}
</script>

4. 兄弟组件通信: Event Bus

 适用于通信不是很复杂的小型项目
 Event Bus是在2.x的文档中才提到的，事实上1.x一样可以使用。
  Bus,其实是创建一个公共的实例，然后使用$on监听，使用$emit触发来进行通信的。

•  1. 创建公共实例文件：eg:bus.js

import Vue from 'vue'
exports.bus = new Vue()

•  2. 组件A,$emit触发事件

<template>
  <div class="hello">
    <button @click="clickBtn">Hello点击</button>
  </div>
</template>
<script>
import {bus} from './../utils/bus.js'
export default {
  methods:{
    clickBtn (){
      //触发事件
      bus.$emit('click-btn','I am click button');
    }
  }
}
</script>

• 3.组件B, $on监听事件

<template>
  <div class="hello">
  </div>
</template>
<script>
import {bus} from './../utils/bus.js'
export default {
  created(){
    bus.$on("click-btn", function (data) {
      console.log(data) //I am click button
    })
  }
}
</script>

 如果是大型项目，通信更为的复杂。我们可以通过官方提供的 Vuex 轻松管理各组件之间通信问题。

总结：

方式	说明	适用版本
props属性	父组件向子组件传递	Vue1.x Vue2.x
$on(事件名)	事件名的类型是字符串（下同），调用它可以通过this.$on()来调用	Vue1.x Vue2.x
$emit(事件名, 参数)	用于触发事件，参数是用于传递给事件的参数。这个用于触发同级事件（当前组件的）	Vue1.x Vue2.x
$dispatch(事件名, 参数)	①向上派发事件，用于向父组件传播。 ②会首先触发当前组件的同名事件（如果有）； ③然后会向上冒泡，当遇到第一个符合的父组件的事件后触发并停止； ④当父组件的事件的返回值设为true会继续冒泡去找下一个。	Vue1.x
$broadcast(事件名, 参数)	①向下广播事件，用于向所有子组件传播。 ②默认情况是仅限子组件； ③子组件事件的返回值是true，才会继续向该子组件的孙组件派发； ④不会触发自身同名事件	Vue1.x
Event Bus	Bus 实现非父子组件的通信，$on / $emit实现	Vue1 Vue2
Vuex	Vuex 专为 Vue.js 应用程序开发的状态管理模式。Vuex相当于一个仓库，管理着所有组件的公共数据	Vue2.x Vue1.x(不建议)

---

作者： Jessy Hong