Vue之mixin全局的用法详解
1. 概述
Vue中的mixin(混入)机制可以让组件之间的代码可以进行复用,即在多组件中共用同一段代码,而不用把这段代码写在多个组件里。这对于代码复用、减少冗余代码是一个非常好的解决方案。mixin可以理解为是一种能够让我们将组件的一部分功能提取出来,并进行重复利用的机制。
2. 语法
下面是mixin的语法:
var mixin = {
data() {
return {
name: 'Andy'
}
},
methods: {
changeName(name) {
this.name = name;
}
}
}
在组件中使用mixin:
var component = {
mixins: [mixin],
data() {
return {
age: 18
}
}
}
*mixin对象中的属性会被混入到所有引用它的组件中,即组件中的$option对象;
*如果组件和mixin中有同名选项,则组件的选项会覆盖mixin的选项;
*如果选项值为对象,则会进行合并操作;
下面是一个完整示例:
var mixin = {
data() {
return {
name: 'Andy',
age: 18
}
},
computed: {
fullName() {
return this.name + ' ' + this.age;
}
},
methods: {
changeName(name) {
this.name = name;
}
}
}
var component = {
mixins: [mixin],
created() {
console.log(this.fullName); // "Andy 18"
this.changeName('Lucy');
console.log(this.fullName); // "Lucy 18"
}
}
new Vue(component);
3. mixin在Vue中的应用
3.1 mixin的全局属性
我们可以将mixin全局注册,这就意味着其被引用的所有组件都将应用该mixin的选项。
// mixin.js
var mixin = {
methods: {
test() {
console.log('测试方法');
}
}
}
export default mixin;
在main.js中全局注册mixin:
import Vue from 'vue';
import mixin from './mixin.js';
Vue.mixin(mixin);
new Vue({
el: '#app1'
});
new Vue({
el: '#app2'
});
<div id="app1">
<button @click="test">测试</button>
</div>
<div id="app2">
<button @click="test">测试</button>
</div>
在两个不同的Vue实例中,我们都使用了同一段代码test
方法。这里test
方法已经被全局定义,不需要在每个组件中定义一遍代码,可以避免代码的重复。
3.2 mixin进行选项合并
如果一个组件和一个mixin的选项相同,则组件的选项会覆盖mixin的选项。如果选项值为对象,则会进行合并操作。
var mixin = {
data() {
return {
message: 'mixin中的数据'
}
},
methods: {
showMessage() {
console.log('mixin的showMessage方法');
}
}
}
var component = {
data() {
return {
message: '组件中的数据'
}
},
methods: {
showMessage() {
console.log('组件的showMessage方法');
}
},
mixins: [mixin]
}
如果代码中的组件或mixin都有一个数据属性message
和一个方法showMessage
,那么 component
选项会覆盖 mixin
的选项。 mixin.showMesssage
的方法会在 component.showMessage
方法前被调用。
4. 总结
通过mixin机制可以实现组件之间的功能复用,避免了代码重复,让代码更加简洁,同时也方便了代码的维护。
可以用全局的方式注册mixin,也可以用局部方式注册。在组件和mixin中有同名选项时,会按照优先顺序进行覆盖,即组件> mixin。
如果选项值为对象,则会进行合并操作。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Vue之mixin全局的用法详解 - Python技术站