混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
这句话我们可以理解为在js代码中定义一个混入对象,里面可以包含一个组件可以有的任何组件选项:data、method、watch、钩子函数等,使用的话,分为局部混入和全局混入。
首先新建一个mixin.js文件,添加以下代码。
// 混入
export default {
data() {
return {
msg: "Hello Word!"
};
},
created() {},
computed: {},
methods: {
show() {
console.log(this.msg);
}
}
};
这个文件格式应该比较眼熟,一个.vue文件包含template、script、style三个部分,mixin.js这个文件很像script这个部分。对的,script里的data、method、watch、钩子函数等,都可以定义到mixin.js这个文件。那这里面可能就会存在问题,比如mixin.js中的data、method等和引用混入的组件中存在冲突,这时采用组件内部优先。
局部混入
<template>
<div id="myVue">
<span @click="show">{{msg}}</span>
</div>
</template>
<script>
import myMixin from "./mixin.js";
export default {
name: "myVue",
mixins: [myMixin],
created() {
console.log("组件自身的钩子函数");
},
};
</script>
首先我们引入mixin.js,然后就可以调用混入的方法和数据
全局混入
在main.js中引入该文件并使用mixin方法进行注册
import Vue from 'vue';
import App from './App';
// 增加混入
import myMixin from "@/mixin";
Vue.mixin(myMixin);
new Vue({
el: '#app',
components: { App },
template: '<App/>'
});
全局注册后,在任意组件都可以使用,谨慎使用全局混入对象,因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。
正文完