>[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> ~~~