前言
眾所周知vue是一種mvvm框架，它相對於jquery可能比較大的差異點之一就在於元件之間的通訊了。本文重點是梳理了前兩個,父子元件通訊和eventbus通訊,我覺得vue文件裡的說明還是有一些簡易,我自己第一遍是沒看明白vqnof。
第一種通訊方式:父子元件通訊
父元件向子元件傳遞資料
父元件一共需要做4件事
1.import son from './son.js'引入子元件 son
2.在components : 裡註冊所有子元件名稱
3.在父元件的template應用子元件,
4.如果需要傳遞資料給子元件,就在template模板裡寫
// 1.引入子元件
import counter from './counter'
import son from './son'
// 2.在ccmponents裡註冊子元件
components : ,
// 3.在template裡使用子元件
// 4.如果需要傳遞資料,也是在templete裡寫
子元件只需要做1件事
1.用props接受資料,就可以直接使用資料
2.子元件接受到的資料,不能去修改。如果你的確需要修改,可以用計算屬性,或者程式設計客棧把資料賦值給子元件data裡的乙個變數
// 1.用props接受資料
props: [
'num'
],// 2.如果需要修改得到的資料,可以這樣寫
props: [
'num'
], data ()
},子元件向父元件傳遞資料
父元件一共需要做2件事情
在template裡定義事件
在methods裡寫函式,監聽子元件的事件觸發
// 1. 在templete裡應用子元件時,定義事件changenumber
程式設計客棧mber"
vqnof @changenumber="changenumber"
>
// 2. 用changenumber監聽事件是否觸發
methods: ,
}子元件一共需要1件事情
在資料變化後,用$emit觸發即可
// 1. 子元件在資料變化後,用$emit觸發即可,第二個引數可以傳遞引數
methods: ,
}第二種通訊方式: eventbus
eventbus這種通訊方式,針對的是非父子元件之間的通訊,它的原理還是通過事件的觸發和監聽。
但是因為是非父子元件的關係,他們需要有乙個中間元件來連線。
我是使用的通過在根元件,也就是#app元件上定義了乙個所有元件都可以訪問到的元件,具體使用方式如下
使用eventbus傳遞資料,我們一共需要做3件事情
1.給app元件新增bus屬性 (這樣所有元件都可以通過this.$root.bus訪問到它,而且不需要引入任何檔案)
2.在元件1裡,this.$root.bus.$emit觸發事件
3.在元件2裡,this.$root.bus.$on監聽事件
// 1.在main.js裡給app元件,新增bus屬性
import vue from 'vue'
new vue(,
template: '',
data()
}})// 2.在元件1裡,觸發emit
increment(),
// 3.在元件2裡,監聽事件,接受資料
mounted())
},第三種通訊方式: 利用localstorage或者sessionstorage
這種通訊比較簡單,缺點是資料和狀態比較混亂,不太容易維護。
通過window.localstorage.getitem(key)獲取資料
通過window.localstorage.setitem(key,value)儲存資料
注意：用json.parse() / json.stringify()做資料格式轉換。
第四種通訊方式: 利用vuex
vuex比較複雜,可以單獨寫一篇
總結本文標題: vue元件通訊的四種方式彙總
本文位址:
vue元件的四種寫法
資料驅動和元件化是vue.js兩個最重要的特點。元件化是為了方便 復用，提高開發效率。常見的vue元件寫法有四種，各有特色，適用於不同的場景。結構 元件的註冊 vue.component componentname method 元件其他的屬性和方法 元件的使用 newvue 特點 1 可以直接在h...
vue實戰 vue父子元件通訊方式彙總
vue專案的一大亮點就是元件化。使用元件可以極大地提高專案中 的復用率，減少 量。但是使用元件最大的難點就是父子元件之間的通訊。我是父元件 我是子元件 父元件對我說 子元件使用 emit方法呼叫父元件的方法，達到子通訊父的目的。我是父元件 我是子元件 父元件對我說 父元件通過 refs呼叫子元件的方...
Mysql的四種通訊方式
老方式，先練一下審美 tcp ip套接字連線方式是mysql在任何平台都提供的一種連線方式，也是網路中使用最多的一種方式。那麼他們是怎麼連線上的嘞？假設我有兩台伺服器分別部署mysql資料庫客戶端 192.168.0.1 和mysql資料庫例項 192.168.0.2 兩者需要進行通訊，需要建立tc...