>[success] # 組件通信（二） ~~~ 1.使用'mixins' -- 混入 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈 活的方式。 2.簡單的理解就是，就是類似繼承的關系，如果當前組件中有和'mixins' 重名 的，利用繼承的思考方式就可以理解成別重寫了 ~~~ >[info] ## 使用案例 * 案例效果圖  ~~~ 1.下面的案例已經將上面的情況說明，'mixins' 可以做到類似與繼承的形式 ,調用的一方可以使用被調用 一方中的方法 ~~~ >[danger] ##### 提取需要放進mixins中的js * 文件目錄在src/lib/tool 中定義了一個公共的觸發 ~~~ export const myMixins = { data(){ return{ thisData:'我是mixins中的數據' } }, methods:{ doTish(){ console.log('我是mixins中的數據') }, }, } ~~~ >[danger] ##### 在我的正常組件中去調用 ~~~ <template> <div class="home"> {{thisData}} </div> </template> <script> // @ is an alias to /src import {myMixins} from '@/lib/tool.js' export default { name: 'home', mixins:[myMixins], } </script> ~~~ >[info] ## 對生命周期和重寫說明 * 頁面打印效果  * 控制臺打印效果  ~~~ 1.根據圖片可以看出如果被使用者的方法和使用者的方法名稱一致，那么會 按照使用者的 方法來執行，也就是重寫 2.但生命周期不同的點在于不會覆蓋，會先執行被使用者的周期然后使用者 的周期，依次交叉 ~~~ >[danger] ##### 提取需要放進mixins中的js ~~~ export const myMixins = { data(){ return{ thisData:'我是mixins中的數據' } }, methods:{ doTish(){ console.log('我是mixins中的數據') }, }, created(){ console.log('我是myMixins 的create的生命周期') }, mounted(){ console.log('我是myMixins mounted的生命周期') }, } ~~~ >[danger] ##### 在我的正常組件中去調用 ~~~ <template> <div class="home"> {{thisData}} </div> </template> <script> // @ is an alias to /src import {myMixins} from '@/lib/tool.js' export default { name: 'home', mixins:[myMixins], data(){ return{ thisData:'重寫了mixins中的數據' } }, created(){ console.log('我調用者 的create的生命周期') }, mounted(){ console.log('我調用者 mounted的生命周期') }, } </script> ~~~ >[info] ## 使用mixins 的特性做一個用戶信息組件通信 ~~~ 1.在一個通用的user.js 中的生命周期去調用當前的方法，然后使用的去繼承 這個調用，當使用的時候就可以獲取到用戶信息，但這種做法會只要使用 就會調用接口 ~~~ >[danger] ##### 做一個通用user.js ~~~ export default { data () { return { userInfo: null } }, methods: { getUserInfo () { // 這里通過 ajax 獲取用戶信息后，賦值給 this.userInfo，以下為偽代碼 $.ajax('/user/info', (data) => { this.userInfo = data; }); } }, mounted () { this.getUserInfo(); } } ~~~ >[danger] ##### 在需要的組件中去調用'mixins' ~~~ <script> import mixins_user from '../mixins/user.js'; export default { mixins: [mixins_user], data () { return { } } } </script> ~~~