Vue組件通信方式(父傳子、子傳父、兄弟通信)
更新時間：2022年05月27日 14:32:37 作者：star@星空
這篇文章主要介紹了Vue組件通信方式(父傳子、子傳父、兄弟通信)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
父組件傳到子組件
父組件是通過props屬性給子組件通信的
數(shù)據(jù)是單向流動 父—>子 （子組件中修改props數(shù)據(jù)，是無效的，會有一個紅色警告）
1. 父組件parent.vue代碼如下：
?<template>
? ?<div class="parent">
? ? ?<h2>{{ msg }}</h2>
? ? ?<son :fa-msg="msg"></son> <!-- 子組件綁定faMsg變量,注意駝峰-->
?</div>
?</template>?<script>
?import son from './Son' //引入子組件
?export default {
? ?name: 'HelloWorld',
? ?data () {
? ? ?return {
? ? ? ?msg: '父組件',
? ? ?}
? ?},
? ?components:{son},
?}
?</script>2. 子組件son代碼如下：
?<template>
? ?<div class="son">
? ? ?<p>{{ sonMsg }}</p>
? ? ?<p>子組件接收到內(nèi)容：{{ faMsg }}</p>
? ?</div>
?</template>?<script>
?export default {
? ?name: "son",
? ?data(){
? ? ?return {
? ? ? ?sonMsg:'子組件',
? ? ?}
? ?},
? ?props:['faMsg'],//接收psMsg值
?}
</script>子組件通過props來接受數(shù)據(jù)
- 第一種方法
props: ['childCom']
- 第二種方法
props: {
? ? childCom: String //這里指定了字符串類型，如果類型不一致會警告的哦
}
- 第三種方法
props: {
? ? childCom: {
? ? ? ? type: String,
? ? ? ? default: 'sichaoyun'?
? ? }
}子組件向父組件傳值
通過綁定事件然后及$emit傳值
vue2.0只允許單向數(shù)據(jù)傳遞，我們通過出發(fā)事件來改變組件的數(shù)據(jù)
1.父組件parent代碼如下:
父組件通過綁定自定義事件，接受子組件傳遞過來的參數(shù)
?<template>
? ?<div class="parent">
? ? ?<h2>{{ msg }}</h2>
? ? ?<p>父組件接手到的內(nèi)容：{{ username }}</p>
? ? ?<son psMsg="我是你爸爸" @transfer="getUser"></son>?
? ? ? <!-- 監(jiān)聽子組件觸發(fā)的transfer事件,然后調(diào)用getUser方法 -->
? ?</div>
?</template>?<script>
?import son from './Son'
?export default {
? ?name: 'HelloWorld',
? ?data () {
? ? ?return {
? ? ? ?msg: '父組件',
? ? ? ?username:'',
? ? ?}
? ?},
? ?components:{son},
? ?methods:{
? ? ?getUser(msg){
? ? ? ?this.username= msg
? ? ?}
? ?}
?}
?</script>2.子組件son代碼如下：
子組件通過$emit觸發(fā)父組件上的自定義事件，發(fā)送參數(shù)
?<template>
? ?<div class="son">
? ? ?<p>{{ sonMsg }}</p>
? ? ?<p>子組件接收到內(nèi)容：{{ psMsg }}</p>
? ? ?<!--<input type="text" v-model="user" @change="setUser">-->
? ? ?<button @click="setUser">傳值</button>
? ?</div>
?</template>?<script>
?export default {
? ?name: "son",
? ?data(){
? ? ?return {
? ? ? ?sonMsg:'子組件',
? ? ? ?user:'子傳父的內(nèi)容'
? ? ?}
? ?},
? ?props:['psMsg'],
? ?methods:{
? ? ?setUser:function(){
? ? ? ?this.$emit('transfer',this.user)//觸發(fā)transfer方法，this.user 為向父組件傳遞的數(shù)據(jù)
? ? ?}
? ?}
?}
?</script>非父子傳參 （事件總線）
假設(shè)你有兩個Vue組件需要通信： A 和 B ，A組件按鈕上面綁定了點擊事件，發(fā)送一則消息，B組件接收。
1. 初始化，全局創(chuàng)建$bus
直接在項目中的 main.js 初始化 $bus :
// main.js window.$bus=new Vue();
注意，這種方式初始化一個 全局的事件總線 。
2. 發(fā)送事件
$bus.$emit("aMsg", '來自A頁面的消息');<!-- A.vue --> <template> ? ?<button @click="sendMsg()">-</button> </template>
<script>?
//import $bus from "../bus.js";
export default {
?methods: {
? ?sendMsg() {
? ? ?$bus.$emit("aMsg", '來自A頁面的消息');
? ?}
?}
};?
</script>接下來，我們需要在 B頁面 中接收這則消息。
4. 接收事件
$bus.$on("事件名",callback)<!-- IncrementCount.vue -->
<template>
?<p>{{msg}}</p>
</template><script>?
//import $bus ?from "../bus.js";
export default {
?data(){
? ?return {
? ? ?msg: ''
? ?}
?},
?mounted() {
? ?$bus.$on("aMsg", (msg) => {
? ? ?// A發(fā)送來的消息
? ? ?this.msg = msg;
? ?});
?}
};
</script><<<<<<<<<<<<<<下方是拓展，面試不必說>>>>>>>>>>>
事件總線推薦下面寫法：
集中式的事件中間件就是 Bus。我習(xí)慣將bus定義到全局：
app.js
var eventBus = {
? ? install(Vue,options) {
? ? ? ? Vue.prototype.$bus = vue
? ? }
};
Vue.use(eventBus);
然后在組件中，可以使用$emit， $on， $off 分別來分發(fā)、監(jiān)聽、取消監(jiān)聽事件：
分發(fā)事件的組件
// ...
methods: {
? todo: function () {
? ? this.$bus.$emit('todoSth', params); ?//params是傳遞的參數(shù)
? ? //...
? }
}
監(jiān)聽的組件
// ...
created() {
? this.$bus.$on('todoSth', (params) => { ?//獲取傳遞的參數(shù)并進行操作
? ? ? //todo something
? })
},
// 最好在組件銷毀前
// 清除事件監(jiān)聽
beforeDestroy () {
? this.$bus.$off('todoSth');
}如果需要監(jiān)聽多個組件，只需要更改 bus 的 eventName:
// ...
created() {
? this.$bus.$on('firstTodo', this.firstTodo);
? this.$bus.$on('secondTodo', this.secondTodo);
},
// 清除事件監(jiān)聽
beforeDestroy () {
? this.$bus.$off('firstTodo', this.firstTodo);
? this.$bus.$off('secondTodo', this.secondTodo);
}vue 跨頁面雙向通信
同源通信
1. localStorage
添加時間監(jiān)聽
window.addEventListener('storage', function (e) {});改變 localStorage 值，觸發(fā) storage 事件
window.localStorage.setItem('params', JSON.stringify(object));2. 通過跳轉(zhuǎn) url 傳參
// 跳轉(zhuǎn)路徑帶參數(shù)
3. 通過 BroadCast channel 廣播實現(xiàn)通信
// 創(chuàng)建一個廣播頻道
const bc = new BroadcastChannel('kaixin');// 其他頁面可以通過onmessage來監(jiān)聽被廣播的消息
bc.onmessage = function (res) {
? ? const data = res.data;
};
// 發(fā)送消息時直接調(diào)用實例上的postMessage方法 bc.postMessage(data);
4. shareWorker
非同源通訊
1. iframe 嵌套
1、發(fā)送消息
window.postMessage(message, targetOrigin, [transfer])
// message ?需要傳的數(shù)據(jù)[object]
// 目標(biāo)窗口(URI), *代表沒有限制任何窗口都能接收
// transfer 是一串和message 同時傳遞的 Transferable 對象. 這些對象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。
2、監(jiān)聽發(fā)來的消息
window.addEventListener("message", receiveMessage, false);
// receiveMessage 處理函數(shù)[$event]
function receiveMessage(event){
????// 參數(shù) event
????// event.data 就是你傳的參數(shù)
????// event.origin 發(fā)送者的目標(biāo)url，做安全驗證
????// event.source 發(fā)送者的window對象
????
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章較詳細的給大家介紹了vue組件之間傳值的方法，在 Vue 中，可以使用props向子組件傳遞數(shù)據(jù)。具體傳遞方法大家跟隨腳本之家小編一起看看吧2018-08-08
vue 中使用 vxe-table 制作可編輯表格的使用過程
這篇文章主要介紹了vue 中使用 vxe-table 制作可編輯表格的使用過程,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-08-08
有時，你可能希望將任意信息附加到路由上，如過渡名稱、誰可以訪問路由等。這些事情可以通過接收屬性對象的meta屬性來實現(xiàn)，并且它可以在路由地址和導(dǎo)航守衛(wèi)上都被訪問到2022-09-09
這篇文章主要為大家詳細介紹了Vue3中響應(yīng)式的一些特殊處理，文中的示例代碼講解詳細，對我們深入了解Vue3有一定的幫助，需要的可以參考一下2023-04-04
這篇文章主要介紹了vue實現(xiàn)微信二次分享以及自定義分享的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要介紹了this在vue和小程序中的使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了vue實現(xiàn)直播間點贊飄心效果的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Vue數(shù)據(jù)監(jiān)聽方法watch的使用
這篇文章主要介紹了Vue數(shù)據(jù)監(jiān)聽方法watch的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue router 通過路由來實現(xiàn)切換頭部標(biāo)題功能
在做單頁面應(yīng)用程序時，一般頁面布局頭尾兩塊都是固定在布局頁面，中間為是路由入口。這篇文章主要介紹了vue-router 通過路由來實現(xiàn)切換頭部標(biāo)題 ,需要的朋友可以參考下2019-04-04
Vue?使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制
個人在做文件上傳功能的時候,踩過不少的坑,特在此記錄下,本文介紹Vue使用?ElementUi?el-upload?手動上傳文件限制上傳文件類型大小同名等進行限制問題,感興趣的朋友一起看看吧2024-02-02