当前位置：首页 > news >正文

前端基础之《Vue（9）—混入》

news 来源：原创 2025/4/26 14:29:45

一、什么是混入

1、是一种代码复用的技巧
Vue组件是由若干选项组成的，向组件中混入可复用的选项。

2、作用
比如我封装两个组件，一个是A组件，一个是B组件，发现它里面有相同的选项，就可以用混用的方式来复用它。

二、混入方式

1、全局混入
使用Vue.mixin({选项})进行全局混入。
当前Vue程序中，所有组件都拥有了这些被混入的选项。

2、局部混入
使用mixins:[{},{}]选项，进行局部混入。
只有当前组件才有这些被混入的选项。

3、一般混入的内容是
data、methods、生命周期钩子。

4、当一个组件同时有全局混入、局部混入、自有选项时，它们的优先级
自有选项 > 局部选项 > 全局混入

5、关于混入
注意：尽量不要用全局混入，偶尔会用到局部混入。

三、混入的缺点

1、当混入用的多了，选项来历不明，代码不易维护。

四、混入例子代码

<html>
<head><title>混入</title><style></style>
</head>
<body><div id="app"><home-1></home-1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const aa = {data() {return {name: 'aa'}},mounted() {console.log('---mounted aa')}}const bb = {data() {return {name: 'bb'}},mounted() {console.log('---mounted bb')}}// 全局混入Vue.mixin({data() {return {version: 'v2' //所有组件都增加一个版本的变量}},methods: {maidian(id) {console.log('---调接口埋点', id)}}})Vue.component('home-1', {template:`<div>首页{{version}}</div>`,mounted() {this.maidian(100)console.log('---name', this.name)},// 局部混入mixins:[aa, bb]            })const app = new Vue({})app.$mount('#app')</script></body>
</html>

五、混入可以解决什么问题

1、注入埋点方法
埋点：你没有调接口，它自己悄悄调接口，把你的爱好发到后台。

2、单位的转换方法、工具方法

3、Echarts图表封装