Vue

mixin混入

发表于 2022-02-11
预计阅读时间 1 分钟
181
浏览

可以把多个组件都需要使用的东西配置成一个mixin对象

  • 1.第一步在src>mixin.js(创建js)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export const mixin = {
methods: {
showName() {
alert(this.name)
}
},
mounted() {
console.log('你好呀');
},
}

export const mixin2 = {
data() {
return {
x: 100
}
},
}
  • 2.在组件中引入mixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import {mixin,mixin2} from '../mixin.js'
export default {
name:'School',
//data中的数据如果组件有就用组件的
// 生命周期都会执行
// 可以把多个组件需要的配置成一个mixin对象
data() {
return {
name:'刘刘刘',
sex:'男',
x:12
}
},
mixins:[mixin,mixin2],

}
  • 3.全局mixin引入在main.js里
1
2
import {mixin2} from './mixin.js'
Vue.use(mixin2)

如果您喜欢此博客或发现它对您有用,则欢迎对此发表评论。 也欢迎您共享此博客,以便更多人可以参与。 如果博客中使用的图像侵犯了您的版权,请与作者联系以将其删除。 谢谢 !