溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
