浅析vue混入(mixin)
混入 (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 实例 (包括第三方模板)。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-10-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读