Vue2.0实现组件之间数据交互和通信操作示例

//定义事件中心，在模板通信是使用。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>

<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>

<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>