Vue組件通信的四種方式匯總

前言

我們提供的服務有：成都網(wǎng)站設計、做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、梅江ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的梅江網(wǎng)站制作公司

眾所周知vue是一種mvvm框架，它相對于jquery可能比較大的差異點之一就在于組件之間的通信了。本文重點是梳理了前兩個,父子組件通信和eventBus通信,我覺得Vue文檔里的說明還是有一些簡易,我自己第一遍是沒看明白。

父子組件的通信
非父子組件的eventBus通信
利用本地緩存實現(xiàn)組件通信
Vuex通信

第一種通信方式:父子組件通信

父組件向子組件傳遞數(shù)據(jù)

父組件一共需要做4件事

1.import son from './son.js' 引入子組件 son

2.在components : {"son"} 里注冊所有子組件名稱

3.在父組件的template應用子組件, <son></son>

4.如果需要傳遞數(shù)據(jù)給子組件,就在template模板里寫 <son :num="number"></son>

 // 1.引入子組件 
 import counter from './counter'
 import son from './son'

// 2.在ccmponents里注冊子組件
 components : {
 counter,
 son
 },

// 3.在template里使用子組件
 <son></son>

 // 4.如果需要傳遞數(shù)據(jù),也是在templete里寫
 <counter :num="number"></counter>

子組件只需要做1件事

1.用props接受數(shù)據(jù),就可以直接使用數(shù)據(jù)

2.子組件接受到的數(shù)據(jù),不能去修改。如果你的確需要修改,可以用計算屬性,或者把數(shù)據(jù)賦值給子組件data里的一個變量

 // 1.用Props接受數(shù)據(jù)
 props: [
  'num'
  ],

// 2.如果需要修改得到的數(shù)據(jù),可以這樣寫
 props: [
  'num'
 ],
 data () {
 return {
  number : this.num
 }
 },

子組件向父組件傳遞數(shù)據(jù)

父組件一共需要做2件事情

在template里定義事件

在methods里寫函數(shù),監(jiān)聽子組件的事件觸發(fā)

// 1. 在templete里應用子組件時,定義事件changeNumber
 <counter :num="number"
   @changeNumber="changeNumber"
 >
 </counter>

// 2. 用changeNumber監(jiān)聽事件是否觸發(fā)
 methods: {
  changeNumber(e){
  console.log('子組件emit了',e);
  this.number = e
  },
 }

子組件一共需要1件事情

在數(shù)據(jù)變化后,用$emit觸發(fā)即可

// 1. 子組件在數(shù)據(jù)變化后,用$emit觸發(fā)即可,第二個參數(shù)可以傳遞參數(shù)
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }

第二種通信方式: eventBus

eventBus這種通信方式,針對的是非父子組件之間的通信,它的原理還是通過事件的觸發(fā)和監(jiān)聽。

但是因為是非父子組件的關系,他們需要有一個中間組件來連接。

我是使用的通過在根組件,也就是#app組件上定義了一個所有組件都可以訪問到的組件,具體使用方式如下

使用eventBus傳遞數(shù)據(jù),我們一共需要做3件事情

1.給app組件添加Bus屬性 (這樣所有組件都可以通過this.$root.Bus訪問到它,而且不需要引入任何文件)

2.在組件1里,this.$root.Bus.$emit觸發(fā)事件

3.在組件2里,this.$root.Bus.$on監(jiān)聽事件

// 1.在main.js里給app組件,添加bus屬性
import Vue from 'vue'
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>',
 data(){
 return {
 Bus : new Vue()
 }
 }
})

// 2.在組件1里,觸發(fā)emit
increment(){
 this.number++
 this.$root.Bus.$emit('eventName', this.number)
 },

// 3.在組件2里,監(jiān)聽事件,接受數(shù)據(jù)
mounted(){
 this.$root.Bus.$on('eventName', value => {
 this.number = value
 console.log('busEvent');
 })
},

第三種通信方式: 利用localStorage或者sessionStorage

這種通信比較簡單,缺點是數(shù)據(jù)和狀態(tài)比較混亂,不太容易維護。

通過window.localStorage.getItem(key) 獲取數(shù)據(jù)

通過window.localStorage.setItem(key,value) 存儲數(shù)據(jù)

注意：用JSON.parse() / JSON.stringify() 做數(shù)據(jù)格式轉換。

第四種通信方式: 利用Vuex

Vuex比較復雜,可以單獨寫一篇

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對創(chuàng)新互聯(lián)的支持。

文章題目：Vue組件通信的四種方式匯總
當前地址：http://muchs.cn/article4/iideie.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、、靜態(tài)網(wǎng)站、微信小程序、品牌網(wǎng)站制作、小程序開發(fā)

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容