Vue元件間通訊方式都有哪些

開始之前，我們把元件間通訊這個詞進行拆分

都知道元件是vue最強大的功能之一，vue中每乙個.vue我們都可以視之為乙個元件

通訊指的是傳送者通過某種**以某種格式來傳遞資訊到收信者以達到某個目的。廣義上，任何資訊的交通都是通訊

元件間通訊即指元件(.vue)通過某種方式來傳遞資訊以達到某個目的

舉個栗子

我們在使用ui框架中的table元件，可能會往table元件中傳入某些資料，這個本質就形成了元件之間的通訊

從上面這段話，我們可以看到通訊的本質是資訊同步，共享

回到vue中，每個元件之間的都有獨自的作用域，元件間的資料是無法共享的

但實際開發工作中我們常常需要讓元件之間共享資料，這也是元件通訊的目的

要讓它們互相之間能進行通訊，這樣才能構成乙個有機的完整系統

元件間通訊的分類可以分成以下

關係圖:

整理vue中8種常規的通訊方案

通過 props 傳遞

通過 $emit 觸發自定義事件

使用 ref

eventbus

$parent 或 $root

attrs 與 listeners

provide 與 inject

}father.vue元件

this.$emit('add', good)

this.$refs.foo  // 獲取子元件例項，通過子元件例項我們就能拿到對應的資料

// 建立乙個**時間匯流排類

class bus ;   // 存放事件的名字
}  $on(name, fn) 
$emit(name, args) 
}}// main.js
vue.prototype.$bus = new bus() // 將$bus掛載到vue例項的原型上
// 另一種方式
vue.prototype.$bus = new vue() // vue已經實現了bus的功能

this.$bus.$emit('foo')

this.$bus.$on('foo', this.handle)

this.$parent.on('add',this.add)

this.$parent.emit('add')

// child：並未在props中宣告foo

}// parent

// 給grandson隔代傳值，communication/index.vue

// child2做展開
// grandson使⽤
}

provide()

}

inject:['foo'] // 獲取到祖先元件傳遞過來的值

面試官 Vue元件間通訊方式都有哪些

開始之前，我們把元件間通訊這個詞進行拆分 都知道元件是vue最強大的功能之一，vue中每乙個.vue我們都可以視之為乙個元件 通訊指的是傳送者通過某種 以某種格式來傳遞資訊到收信者以達到某個目的。廣義上，任何資訊的交通都是通訊 元件間通訊即指元件 vue 通過某種方式來傳遞資訊以達到某個目的 舉個栗...

vue元件間通訊方式

一 props emit 將要傳遞的引數繫結到元件上，子元件通過props接受引數 props 子元件通過事件傳遞給父元件 this emit functionname 值 只適用於父子 二 on emit 無差別轟炸，想隔幾層隔幾層傳 第一步新建js import vue from vue 使用 ...

vue元件間通訊的幾種方式

方法一 props emit 1 父元件向子元件傳值 父元件中通過v bind繫結需要給子元件傳遞的值，子元件中通過props拿到父元件傳遞的值 username 前者自定義名稱便於子元件呼叫，後者要傳遞資料名 div template import child from components ch...