Vue — 组件通信（二）
最后更新于：2022-04-02 08:08:43
>[success] # 组件通信（二）
~~~
1.使用'mixins' -- 混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵
活的方式。
2.简单的理解就是，就是类似继承的关系，如果当前组件中有和'mixins' 重名
的，利用继承的思考方式就可以理解成别重写了
3.可以利用'mixins' 形成组件通信
~~~
>[info] ## 使用案例
* 案例效果图
~~~
1.下面的案例已经将上面的情况说明，'mixins' 可以做到类似与继承的形式
,调用的一方可以使用被调用 一方中的方法
~~~
>[danger] ##### 提取需要放进mixins中的js
* 文件目录在src/lib/tool 中定义了一个公共的触发
~~~
export const myMixins = {
data(){
return{
thisData:'我是mixins中的数据'
}
},
methods:{
doTish(){
console.log('我是mixins中的数据')
},
},
}
~~~
>[danger] ##### 在我的正常组件中去调用
~~~
';
{{thisData}}
~~~
>[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] ##### 在我的正常组件中去调用
~~~
{{thisData}}
~~~
>[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'
~~~
~~~