Vue2使用mixin

参考文档：https://cn.vuejs.org/api/options-composition.html#mixins

我们可以创建一个Vue2项目，然后尝试使用混入来注入全局变量

首先创建一个mixin，在实例化之前

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseVue.mixin({data:function() {return  {get ABC() {return "6666666"}}},computed: {BASEURL() {return "http://123.com"}}
})new Vue({render: h => h(App),
}).$mount('#app')

就可以在任意实例进行使用

<template><div class="hello"><h1>{{ msg }}</h1><p>{{ ABC }}</p><p>{{ BASEURL }}</p></div>
</template><script>
export default {name: "HelloWorld",props: {msg: String,},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

额外的探索

我们发现如果声明的相同的data，后面的会覆盖前面的

computed计算属性不影响对于data的引用

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseVue.mixin({data:function() {return  {get ABC() {return "6666666"}}},computed: {BASEURL() {return "http://123.com"}}
})
// 一样的data，不一样的值
Vue.mixin({data:function() {return  {get ABC() {return "7777"}}},
})Vue.mixin({computed: {ABC() {return "http://123.com"}}
})
new Vue({render: h => h(App),
}).$mount('#app')