一、场景描述
当两个vue
组件的vc
实例,都用到同一个变量或者方法时,可以,我们能否把公共的代码提取出来,然后,分别引入进行使用了?
答案是肯定的,这里就用到mixin
实现这个效果。
二、mixin提取公共代码并使用
1、创建js文件
mixin.js
(这个名称随便)
export const hunhe = {
methods:{
showName(){
alert(this.name);
}
},
mounted() {
console.log('你好啊!')
}
}
export const hunhe2 = {
data() {
return {
x:100,
y:200
}
},
}
2、创建两个组件
School.vue
<template>
<div>
<h2 @click="showName">学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name:"Vue",
address:"中国"
}
},
}
</script>
Student.vue
<template>
<div>
<h2 @click="showName">学生姓名:{{name}}</h2>
<h2>学生性别:{{sex}}</h2>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name:'张三',
sex:'男'
}
},
}
</script>
3、局部引用mixin.js
Student.vue
中引用
<script>
import {hunhe,hunhe2} from '../mixin'
export default {
name: "Student",
data() {
return {
name:'张三',
sex:'男'
}
},
mixins:[hunhe,hunhe2]
}
</script>
School.vue
中引用
<script>
import {hunhe,hunhe2} from '../mixin'
export default {
name: "School",
data() {
return {
name:"Vue",
address:"中国"
}
},
mixins:[hunhe,hunhe2]
}
</script>
4、全局引用mixin.js(不推荐)
首先,要把局部引用给注释掉,否则重复引用。
修改main.js
入口文件
//下面引入后,那么,所有的vue组件的vc实例都被引入了hunhe和hunhe2对象
import {hunhe,hunhe2} from './mixin'
Vue.mixin(hunhe);
Vue.mixin(hunhe2);
三、效果展示
使用全局引入mixin.js
后,该项目的所有vue
组件都包含了公共变量x,y
四、总结
- 功能:可以把多个组件共用的配置提取成一个混入对象
- 使用方式:
第一步定义混合:
{
data(){....},
methods:{....}
....
}
第二步使用混入:
全局混入:Vue.mixin(xxx)
局部混入:mixins:['xxx']
补充问题:在定义混合里,我们定义的变量名,和方法如果和组件自身的变量名与方法名重名了,会怎么样了?大家可以自行测试下,这样印象更深刻!