分享 vue中文社群文章 介紹 vue 10中元件之間通訊。
介紹 vue 10中元件之間通訊。
從中你能找到你用過沒用過的。
微信公眾號了連結
https://mp.weixin.qq.com/s/0u0D-Ge8RaTjdFPlkHmOvw
幾種通訊方式無外乎以下幾種:
- Prop(常用)
- $emit (元件封裝用的較多)
- .sync語法糖 (較少)
- $attrs 和 $listeners
- $emit (元件封裝用的較多)
- provide 和 inject (高階元件/元件庫用的較多)
- 其他方式通訊
詳述
下面逐個介紹,大神請繞行。
- Prop
英式發音:[prɒp]。這個在我們日常開發當中用到的非常多。簡單來說,我們可以通過 Prop 向子元件傳遞資料。用一個形象的比喻來說,父子元件之間的資料傳遞相當於自上而下的下水管子,只能從上往下流,不能逆流。這也正是 Vue 的設計理念之單向資料流。而 Prop 正是管道與管道之間的一個銜介面,這樣水(資料)才能往下流。說這麼多,看程式碼:
<div id="app"> <child :content="message"></child> </div> // Js let Child = Vue.extend({ template: '<h2>{{ content }}</h2>', props: { content: { type: String, default: () => { return 'from child' } } } }) new Vue({ el: '#app', data: { message: 'from parent' }, components: { Child } }) 瀏覽器輸出: from parent
- $emit
英式發音:[iˈmɪt]。官方說法是觸發當前例項上的事件。附加引數都會傳給監聽器回撥。按照我的理解不知道能不能給大家說明白,先簡單看下程式碼吧:
<div id="app"> <my-button @greet="sayHi"></my-button> </div> let MyButton = Vue.extend({ template: '<button @click="triggerClick">click</button>', data () { return { greeting: 'vue.js!' } }, methods: { triggerClick () { this.$emit('greet', this.greeting) } } }) new Vue({ el: '#app', components: { MyButton }, methods: { sayHi (val) { alert('Hi, ' + val) // 'Hi, vue.js!' } } })
大致邏輯是醬嬸兒的:當我在頁面上點選按鈕時,觸發了元件 MyButton 上的監聽事件 greet,並且把引數傳給了回撥函式 sayHi 。說白了,當我們從子元件 Emit(派發) 一個事件之前,其內部都提前在事件佇列中 On(監聽)了這個事件及其監聽回撥。其實相當於下面這種寫法:
vm.$on('greet', function sayHi (val) {
console.log('Hi, ' + val)
})
vm.$emit('greet', 'vue.js')
// => "Hi, vue.js"
- .sync 修飾符
這個傢伙在 [email protected] 的時候曾作為雙向繫結功能存在,即子元件可以修改父元件中的值。因為它違反了單向資料流的設計理念,所以在 [email protected] 的時候被幹掉了。但是在 [email protected]+ 以上版本又重新引入了這個 .sync 修飾符。但是這次它只是作為一個編譯時的語法糖存在。它會被擴充套件為一個自動更新父元件屬性的 v-on 監聽器。說白了就是讓我們手動進行更新父元件中的值了,從而使資料改動來源更加的明顯。下面引入自官方的一段話:
在有些情況下,我們可能需要對一個 prop 進行“雙向繫結”。不幸的是,真正的雙向繫結會帶來維護上的問題,因為子元件可以修改父元件,且在父元件和子元件都沒有明顯的改動來源。
既然作為一個語法糖,肯定是某種寫法的簡寫形式,哪種寫法呢,看程式碼:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event">
</text-document>
於是我們可以用 .sync 語法糖簡寫成如下形式:
<text-document v-bind:title.sync="doc.title"></text-document>
廢話這麼多,如何做到“雙向繫結” 呢?讓我們進段廣告,廣告之後更加精彩! … 好的,歡迎回來。假如我們想實現這樣一個效果:改變子元件文字框中的值同時改變父元件中的值。怎麼做?列位不妨先想想。先看段程式碼:
<div id="app">
<login :name.sync="userName"></login> {{ userName }}
</div>
let Login = Vue.extend({
template: `
<div class="input-group">
<label>姓名:</label>
<input v-model="text">
</div>
`,
props: ['name'],
data () {
return {
text: ''
}
},
watch: {
text (newVal) {
this.$emit('update:name', newVal)
}
}
})
new Vue({
el: '#app',
data: {
userName: ''
},
components: {
Login
}
})
下面劃重點,程式碼裡有這一句話:
this.$emit('update:name', newVal)
官方語法是:update:myPropName 其中 myPropName 表示要更新的 prop 值。當然如果你不用 .sync 語法糖使用上面的 .$emit 也能達到同樣的效果。僅此而已!
- $attrs 和 $listeners
官網對
attrs" 傳入內部元件——在建立高級別的元件時非常有用。
官網對
listeners" 傳入內部元件——在建立更高層次的元件時非常有用。
我覺得 $attrs 和 $listeners 屬性像兩個收納箱,一個負責收納屬性,一個負責收納事件,都是以物件的形式來儲存資料。看下面的程式碼解釋:
<div id="app">
<child
:foo="foo"
:bar="bar"
@one.native="triggerOne"
@two="triggerTwo">
</child>
</div>
從 Html 中可以看到,這裡有倆屬性和倆方法,區別是屬性一個是 prop 宣告,事件一個是 .native 修飾器。
let Child = Vue.extend({
template: '<h2>{{ foo }}</h2>',
props: ['foo'],
created () {
console.log(this.$attrs, this.$listeners)
// -> {bar: "parent bar"}
// -> {two: fn}
// 這裡我們訪問父元件中的 `triggerTwo` 方法
this.$listeners.two()
// -> 'two'
}
})
new Vue({
el: '#app',
data: {
foo: 'parent foo',
bar: 'parent bar'
},
components: {
Child
},
methods: {
triggerOne () {
alert('one')
},
triggerTwo () {
alert('two')
}
}
})
可以看到,我們可以通過 $attrs 和 listeners" 一級級的往下傳遞,子子孫孫無窮盡也!
一個插曲!
當我們在元件上賦予了一個非Prop 宣告時,編譯之後的程式碼會把這些個屬性都當成原始屬性對待,新增到 html 原生標籤上,看上面的程式碼編譯之後的樣子:
<h2 bar="parent bar">parent foo</h2>
這樣會很難看,同時也爆了某些東西。如何去掉?這正是 inheritAttrs 屬性的用武之地!給元件加上這個屬性就行了,一般是配合 $attrs 使用。看程式碼:
// 原始碼
let Child = Vue.extend({
...
inheritAttrs: false, // 預設是 true
...
})
再次編譯:
<h2>parent foo</h2>
- provide / inject
他倆是對CP, 感覺挺神祕的。來看下官方對 provide / inject 的描述:
provide 和 inject 主要為高階外掛/元件庫提供用例。並不推薦直接用於應用程式程式碼中。並且這對選項需要一起使用,以允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效。
看完描述有點懵懵懂懂!一句話總結就是:小時候你老爸什麼東西都先幫你存著等你長大該娶媳婦兒了你要房子給你買要車給你買只要他有的儘量都會滿足你。下面是這句話的程式碼解釋:
<div id="app">
<son></son>
</div>
let Son = Vue.extend({
template: '<h2>son</h2>',
inject: {
house: {
default: '沒房'
},
car: {
default: '沒車'
},
money: {
// 長大工作了雖然有點錢
// 僅供生活費,需要向父母要
default: '¥4500'
}
},
created () {
console.log(this.house, this.car, this.money)
// -> '房子', '車子', '¥10000'
}
})
new Vue({
el: '#app',
provide: {
house: '房子',
car: '車子',
money: '¥10000'
},
components: {
Son
}
})
- 其他方式通訊
除了以上五種方式外,其實還有:
EventBus
思路就是宣告一個全域性Vue例項變數 EventBus , 把所有的通訊資料,事件監聽都儲存到這個變數上。這樣就達到在元件間資料共享了,有點類似於 Vuex。但這種方式只適用於極小的專案,複雜專案還是推薦 Vuex。下面是實現 EventBus 的簡單程式碼:
<div id="app">
<child></child>
</div>
// 全域性變數
let EventBus = new Vue()
// 子元件
let Child = Vue.extend({
template: '<h2>child</h2>',
created () {
console.log(EventBus.message)
// -> 'hello'
EventBus.$emit('received', 'from child')
}
})
new Vue({
el: '#app',
components: {
Child
},
created () {
// 變數儲存
EventBus.message = 'hello'
// 事件監聽
EventBus.$on('received', function (val) {
console.log('received: '+ val)
// -> 'received: from child'
})
}
})
Vuex
官方推薦的,Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。
$parent
父例項,如果當前例項有的話。通過訪問父例項也能進行資料之間的互動,但極小情況下會直接修改父元件中的資料。
$root
當前元件樹的根 Vue 例項。如果當前例項沒有父例項,此例項將會是其自己。通過訪問根元件也能進行資料之間的互動,但極小情況下會直接修改父元件中的資料。
broadcast / dispatch
他倆是 [email protected] 中的方法,分別是事件廣播 和 事件派發。雖然 [email protected] 裡面刪掉了,但可以模擬這兩個方法。可以借鑑 Element 實現。有時候還是非常有用的,比如我們在開發樹形元件的時候等等。