Vue2單一事件管理組件通信
更新時(shí)間：2017年05月09日 15:05:59 作者：scorpio_h
這篇文章主要為大家詳細(xì)介紹了Vue2單一事件管理組件通信的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文為大家分享了vue $emit 和 $on 組件通信，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue2-單一事件管理組件通信</title>
<script src="vue.js"></script>
<script type="text/javascript">
//準(zhǔn)備一個(gè)空的實(shí)例對(duì)象
var Event = new Vue();
//組件A
var A = {
template: `
<div>
<span>我是A組件的數(shù)據(jù)->{{a}}</span>
<input type="button" value="把A數(shù)據(jù)傳給C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("a-msg", this.a);
}
},
data () {
return {
a: "我是a組件中數(shù)據(jù)"
}
}
};
//組件B
var B = {
template: `
<div>
<span>我是B組件的數(shù)據(jù)->{{a}}</span>
<input type="button" value="把B數(shù)據(jù)傳給C" @click = "send">
</div>
`,
methods: {
send () {
Event.$emit("b-msg", this.a);
}
},
data () {
return {
a: "我是b組件中數(shù)據(jù)"
}
}
};
//組件C
var C = {
template: `
<div>
<h3>我是C組件</h3>
<span>接收過來A的數(shù)據(jù)為: {{a}}</span>
<br>
<span>接收過來B的數(shù)據(jù)為: {}</span>
</div>
`,
mounted () {
//接收A組件的數(shù)據(jù)
Event.$on("a-msg", function (a) {
this.a = a;
}.bind(this));
//接收B組件的數(shù)據(jù)
Event.$on("b-msg", function (a) {
this.b = a;
}.bind(this));
},
data () {
return {
a: "",
b: ""
}
}
};
window.onload = function () {
new Vue({
el: "#box",
components: {
"dom-a": A,
"dom-b": B,
"dom-c": C
}
});
};
</script>
</head>
<body>
<div id="box">
<dom-a></dom-a>
<dom-b></dom-b>
<dom-c></dom-c>
</div>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前想要訪問的頁(yè)面
這篇文章主要介紹了Vue?Router?實(shí)現(xiàn)登錄后跳轉(zhuǎn)到之前相要訪問的頁(yè)面,本文僅演示路由跳轉(zhuǎn)和導(dǎo)航守衛(wèi)相關(guān)代碼的實(shí)現(xiàn)，不包含具體的權(quán)限驗(yàn)證和登錄請(qǐng)求，需要的朋友可以參考下2022-12-12
在一般情況下，我們的項(xiàng)目肯定需要區(qū)分不同環(huán)境，那么Nuxt提供給我們這樣的基本能力了么，下面我們就一起來了解一下2021-05-05
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要為大家介紹了Vue之插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助，希望能夠給你帶來幫助2021-11-11
本文主要介紹了vue2實(shí)現(xiàn)傳送門效果的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue通過moment插件實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實(shí)現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
vite+vue3項(xiàng)目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中集成ESLint與prettier的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中mixins的工具的封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
sass是一個(gè)最初由Hampton Catlin設(shè)計(jì)并由Natalie Weizenbaum開發(fā)的層疊樣式表語(yǔ)言。這篇文章主要介紹了在vue項(xiàng)目中使用sass語(yǔ)法,需要的朋友可以參考下2019-07-07
DeepSeek?助力?Vue?開發(fā)絲滑的步驟條效果(過程詳解)
本文詳細(xì)介紹了如何使用Vue.js和ElementUI創(chuàng)建一個(gè)進(jìn)度條組件,并將所有代碼保存在一個(gè)文件夾中,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2025-02-02