Vue混入（mixin）的用法

目录

1、mixin.js

2、使用

2.1 单文件引用

2.2 全局引用

---

混入：将共用的数据、方法等写入在一个文件内，以引入的方式放入vue文件中使用。

我个人的理解是：可以放接口的域名、共用方法等。

当然还有一个插件可以放共用方法。

1、mixin.js

文件位置：./src/mixin.js

export default{
    data() {
        return {
            telephone: "166666666666"
        }
    },
    methods: {
        showDomain(str){
            alert(str);
        }
    }
}

2、使用

2.1 单文件引用

目标vue文件中引入mixin.js，然后new方法里面注册一下

import mixin from '../mixin';  // 单个文件里面使用mixin文件，1、先引入

export default{
    data: function() {
        return {}
    },
    props:{
        msg: String
    },
    mixins: [mixin]  // 单个文件使用mixin，2、注册（暂且称之为注册吧）
}

2.2 全局引用

在main.js文件里面引入mixin.js，用Vue.mixin(mixin)

import mixin from './mixin'

Vue.mixin(mixin)

 备注：个人学习笔记，有些定义说的并不准确，希望可以给大家提供帮助。