[Toc] >[success] # 組件通信 ~~~ 1.常見的組件通信方式使用'props'父傳子，使用'$emit' 子傳父，使 用'bus'/'vuex' 實現兄弟組件通信，使用一些特別的方式例如'ref','$parent' ,'$children'。 2.另外一種不常見的，組件的通信 'provide / inject',這種通信和'vuex','bus' 不同，它是一種vue.js 內置的接口 3. 'provide / inject' 和'props' 不同點是'props' 只能進行父子之間的傳值， 簡單的說就是一層，但如果想爺孫傳值就不行，爺孫直接的可以使用 'provide / inject' 可以理解是一個加強版本的'props',但做不到兄弟組件通信 ，兄弟間還是需要使用'bus' 和'vuex' ,但是也有其他辦法利用 'provide / inject'實現 4.provide 和 inject 綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了 一個可監聽的對象，那么其對象的屬性還是可響應的 ~~~ >[info] ## 使用provide / inject <a href='https://cn.vuejs.org/v2/api/#provide-inject'>官網講解</a> ~~~ 1.解釋單詞意思方便更好的理解 ，provide -- 提供 ， inject -- 注入 2.官方文檔不推薦使用，但是iview作者給出的建議是可以好好利用讓其變得強大。 3.'provide：Object | () => Object' 'inject：Array<string> | { [key: string]: string | Symbol | Object }' 官方給的兩個參數接收的值，其中provide 支持對象和一個方法返回對象 ，下面的案例將對這個詳細講解 ~~~ >[danger] ##### provide 對象形式使用 * 下面代碼實現效果：  ~~~ 1.使用'provide' 對象的形式，注意如果使用對象的形式，是無法獲得當前 ，組件的'this'指向因此也無法獲取其中的data 2.下面案例中 'Acomponents' 組件中嵌套了'Bcomponents'，在一個視圖組 件中去調用'Acomponents' 這樣這個視圖和'Bcomponents' 形成了爺孫關系 ~~~ * Acomponents.vue 組件中 ~~~ <template> <div> <Bcomponents></Bcomponents> </div> </template> <script> import Bcomponents from '@/components/b-components' export default { components:{ Bcomponents }, } </script> <style scoped> </style> ~~~ * 組件 Bcomponents 寫法 ~~~ <template> <div> 我接受爺爺組件的傳值{{name}} </div> </template> <script> export default { inject: ['name'], } </script> <style scoped> </style> ~~~ * 調用組件Acomponents 的視圖組件寫法 ~~~ <template> <div class="home"> <Acomponents></Acomponents> </div> </template> <script> // @ is an alias to /src import Acomponents from '@/components/a-components' export default { name: 'home', // 這里是對象 provide:{ name:"1111" // name:this.dataName 會報錯不支持這么使用 }, data(){ return{ dataName:"我給孫子的值" } }, components: { Acomponents, } } </script> ~~~ >[danger] ##### provide 使用方法返回對象 * 代碼效果圖  ~~~ 1. 'provide' 在剛才案例中使用對象的形式傳入this，會報錯但是不能傳遞 固定值，為了讓代碼更靈活，使用方法返回對象的形式如下代碼。 ~~~ * Acomponents.vue 組件中 ~~~ <template> <div> <Bcomponents></Bcomponents> </div> </template> <script> import Bcomponents from '@/components/b-components' export default { components:{ Bcomponents }, } </script> <style scoped> </style> ~~~ * 組件 Bcomponents 寫法 ~~~ <template> <div> 我接受爺爺組件的傳值{{name}} </div> </template> <script> export default { inject: ['name'], } </script> <style scoped> </style> ~~~ * 調用組件Acomponents 的視圖組件寫法 ~~~ <template> <div class="home"> <Acomponents></Acomponents> </div> </template> <script> // @ is an alias to /src import Acomponents from '@/components/a-components' export default { name: 'home', // 這里是方法 provide(){ return{ name:this.dataName } }, data(){ return{ dataName:"我給孫子的值" } }, components: { Acomponents, } } </script> ~~~ >[danger] ##### provide技巧 ~~~ 1.在文章開頭就說了'provide 和 inject 綁定并不是可響應的。這是刻意為之 的。然而，如果你傳入了一個可監聽的對象，那么其對象的屬性還是可響應 的'簡單的說父組件提供給子組件的內容，當父組件再次改變數據的時候， 子組件是收不到的，并且子組件也無法更改父組件傳遞的值 2.但是官方的這句話也說了，如果是一個可監聽的對象就可以，這樣就有一 個解決方法，就是父組件在提供屬性值的時候提供的參數是對象，或者是 當前的this本身 3.在vue2.6版本提供了一個'Vue.observable' 來幫忙解決如果傳遞一個this過 于浪費，和如果傳遞必須要把數據變成對象的形式的尷尬 ~~~ * 父組件 ~~~ <template> <div class="home"> <input v-model="dataName.name"> <Acomponents></Acomponents> </div> </template> <script> // @ is an alias to /src import Acomponents from '@/components/a-components' import Vue from "vue"; export default { name: 'home', provide(){ this.dataName = Vue.observable({ name: "blue" }); return{ dataName:this.dataName } }, components: { Acomponents, } } </script> ~~~ * 子組件 ~~~ <template> <div> <input v-model="dataName.name"> 我接受爺爺組件的傳值{{dataName.name}} </div> </template> <script> export default { inject: ['dataName'], } </script> <style scoped> </style> ~~~ >[info] ## 根據案例衍生 ~~~ 1.思考什么時候可以利用這個屬性？如何利用這個屬性可以達到最佳 2.答：當我們封裝一個select 標簽的時候，我們將select 和里面的opition， 拆成兩個組件去寫和維護，這時候'opition' 組件想獲取'select' 組件的值時候 ，可以利用這個或者'props' 來傳遞 3.答：如何達到最佳，當我們使用'provide' 時候使用方法返回對象可以傳遞 一個this，如果我們直接將祖先組件的'this' 傳遞過去，就會發現在子孫組件 中就可以去調用祖先組件的中的內容 ~~~ >[danger] ##### 關于問題一種select 組件 <a href="https://www.jianshu.com/p/6dc5ea5ca95e">直接參考簡書文章</a> >[danger] ##### 利用問題二的特性做一個Vuex ~~~ 1.下面的案例不是為了替代Vuex，只是一種方案來實現Vuex 2.根據cli搭建的項目，我們可以發現'app.vue'實際上是所有的根，而且 app.vue 是整個項目第一個被渲染的組件，而且只會渲染一次（即使切換路 由，app.vue 也不會被再次渲染），利用這個特性，很適合做一次性全局的 狀態數據管理 3.嘗試寫一個全局登陸用戶信息案例 ~~~ * 首先下面代碼是對第二條的解釋(常見的app.vue一般只有一個router-view) ~~~ <template> <div> <router-view></router-view> </div> </template> <script> export default { } </script> ~~~ * 開始案例利用provide 方法的形式返回app.vue this執行，讓全局組件獲取 到登陸信息 ~~~ <template> <div> <router-view></router-view> </div> </template> <script> export default { provide () { return { app: this } } } </script> ~~~ * 接下來，任何組件（或路由）只要通過 inject 注入 app.vue 的 app 的話，都可以直接通過 this.app.xxx 來訪問 app.vue 的 data、computed、methods （下面代碼還是寫在app.vue文件中的） ~~~ <script> export default { provide () { return { app: this } }, data () { return { userInfo: null } }, methods: { getUserInfo () { // 這里通過 ajax 獲取用戶信息后，賦值給 this.userInfo，以下為偽代碼 $.ajax('/user/info', (data) => { this.userInfo = data; }); } }, mounted () { this.getUserInfo(); } } </script> ~~~ * 在組件中或者其他視圖組件中獲取(userInfo 信息) ~~~ <template> <div> {{ app.userInfo }} </div> </template> <script> export default { inject: ['app'] } </script> ~~~ * 如果某個組件中改變從app中的值，需要全局統一的時候可以這么做，更改對應app.vue中的值 ~~~ <template> <div> {{ app.userInfo }} </div> </template> <script> export default { inject: ['app'], methods: { changeUserInfo () { // 這里修改完用戶數據后，通知 app.vue 更新，以下為偽代碼 $.ajax('/user/update', () => { // 直接通過 this.app 就可以調用 app.vue 里的方法 this.app.getUserInfo(); }) } } } </script> ~~~