Vue.mixin混入

当两个或者多个组件存在相同的属性或方法时,将相同的特征提取出来写成一个mixin.js的文件,mixin.js文件的内容是多个组件相同的部分,其内容跟组件的配置项的内容是一样的,但mixin.js文件的中是都相同的配置项。
当某个组件需要使用的该mixin.js文件里面的内容时,先在本组件中导入mixin.js文件,然后在mixin属性中以数组的方式声明,而当存在重叠的配置项时,会保留原本的配置项,其他的都跟原配置项一起混入形成新的配置项,注意:如果生命周期函数发生重叠,是都要执行,不以特定的组件为主!!!
使用方式:

  • (1) 第一步:定义要混合的配置项:
{
	data(){}
	methosds:{}
}
  • 第二步:使用混合,混合包括全局混和和局部混和的两个方式:

    import XXX from module
    全局混入:Vue.mixin(xxx)
    局部混入:minxins:[‘XXX’]

案列:
(1) . 先定义要混合的配置项mixin.js:

export const hehe = {
    methods: {
        showName() {
            console.log(this.name);
        }
    },
    mounted() {
        console.log('a')
    }
}

(2) 在Student和School组件中导入mixin.js 然后局部使用:

import { hehe } from "../mixin";
export default {
  name: "School",
  data() {
    return {
      name: "学校名",
      address: "学校地址",
    };
  },
  mixins: [hehe],
};
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值