本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
