本文實例講述了Vue2.0實現組件之間數據交互和通信操作。分享給大家供大家參考，具體如下：

Vue2.0組件之間數據交互和通信。

Vue2.0廢棄了dispatch 和 $broadcast，如何在實現組件之間的數據交互和通信？下面是一個簡單的demo解決了這個問題。

事件中心（evengtHub.js）：

//定義事件中心，在模板通信是使用。import Vue from 'vue';export default {  bus: new Vue()}

父組件：

<div>  <!--msg必須跟子組件的msg參數一致，@msg是子組件向父組件傳參數的接口，:msg是父組件向子組件傳參數的接口-->  <child1 @msg='getMsg' :msg1='msg1'></child1>  <child1 ref='child2'></child2><div>

<script>import bus form 'eventHub'  componets: {    child1: require('child1'),    child2: require('child2');  },  data() {    return: {      msg1: 'hello'    }  },  methods: {    getMsg(el) {       this.$refs.child2.drop(el);       //父組件調用child2組件的drop方法，傳遞el參數，子組件和子組件之間的通信    }  }</script>

子組件1

<template>  <div class='child1' @click='sendMsg'>{{msg}}<div></template>

<script>import bus form 'eventHub';//props屬性用于子組件接收父組件傳過來的參數  props: {    msg1 :String  },  methods: {    this.bus.$emit('add', event.target);//此方法可以通過子組件1在任意組件內響應點擊事件。    this.$emit('msg', event.target);//發送數據給父組件，這個方法的'msg'參數必須和父組件的@msg保持一致。  }</script>

子組件2

<template>  <div class='child2'><div></template>

<script>import bus form 'eventHub'methods: {  drop(el) {    console.log(el);//打印出child1的div元素  }},created() {  this.bus.$on('add',() => {    console.log('響應child1的點擊事件');  })}</script>

上面的例子中包括父子組件之間互相傳參數和組件之間的通信，更好的組件通信事件請使用vuex。

希望本文所述對大家vue.js程序設計有所幫助。