Vue組件通訊（詳細教學）

這篇文章主要為大家介紹了四種關於Vue元件通訊的方式，分別是父子元件通訊、非父子元件的eventBus通訊、利用localStorage或sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面一起學習學習吧。

前言

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

• 父子元件的通訊

• 非父子元件的eventBus通訊

• 利用本機快取實現元件通訊

• Vuex通訊

#第一種通訊方式:父子元件通訊

第一種通訊方式:父子元件通訊

父元件傳遞資料給子元件

父元件總共需要做4件事      1.

import son from './son .js'

引入子元件son      2.在

components : {"son"}

裡註冊所有子元件名稱      3.在父元件中的template應用子元件,

      4.如果需要傳遞資料給子元件,就在template模板裡寫

##

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

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

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

 // 4.如果需要传递数据,也是在templete里写
 <counter :num="number"></counter>

子元件只需要做1件事

      1.用props接受資料,就可以直接使用資料

      2.子元件接受到的資料,不能去修改。如果你的確需要修改,可以用計算屬性,或者把資料賦值給子元件data裡的一個變數

 // 1.用Props接受数据
 props: [
  'num'
  ],

// 2.如果需要修改得到的数据,可以这样写
 props: [
  'num'
 ],
 data () {
 return {
  number : this.num
 }
 },

子元件傳遞資料

##1元件總共需要做2件事情

在template裡定義事件

在methods裡寫函數,監聽子元件的事件觸發

// 1. 在templete里应用子组件时,定义事件changeNumber
 <counter :num="number"
   @changeNumber="changeNumber"
 >
 </counter>

// 2. 用changeNumber监听事件是否触发
 methods: {
  changeNumber(e){
  console.log('子组件emit了',e);
  this.number = e
  },
 }

子元件一共需要1件事情在資料變更後,用$emit觸發即可

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }

#第二種通訊方式: 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({
 el: '#app',
 components: { App },
 template: &#39;<App/>&#39;,
 data(){
 return {
 Bus : new Vue()
 }
 }
})

// 2.在组件1里,触发emit
increment(){
 this.number++
 this.$root.Bus.$emit('eventName', this.number)
 },

// 3.在组件2里,监听事件,接受数据
mounted(){
 this.$root.Bus.$on('eventName', value => {
 this.number = value
 console.log('busEvent');
 })
},

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

這種通訊比較簡單,缺點是數據和狀態比較混亂,不太容易維護。 透過

window.localStorage.getItem(key)

取得資料透過window.localStorage.setItem(key,value) 儲存資料

注意：用JSON.parse() / JSON.stringify() 做資料格式轉換。

第四種通訊方式: 利用Vuex

#Vuex比較複雜,可以單獨寫一篇上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

利用SpringMVC解決vue跨域要求

webpack 4.0.0-beta.0版本新功能（詳細教學）############在vue2.0元件中如何實作傳值、通訊######

以上是Vue組件通訊（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！