vue中的mixins的介绍和使用
文章目录1. 介绍2. 简单例子3. 合并内容1. data对象2. 钩子函数3. 值为对象的选项,例如`method,components,directives等`4. 全局混入5. 扩展1.与vuex的区别2. 与公共组件的区别1. 介绍官网:[混入 — Vue.js (vuejs.org)](混入 — Vue.js (vuejs.org))混入(mixins)提供了一种非常灵活的方式,来分发
文章目录
1. 介绍
混入(mixins)提供了一种非常灵活的方式,来分发vue组件中的可服用功能。一个混入对象可以包含任意的组件选项(vue在script的部分)。当组件使用混入对象时,所有混入对象的选项都将被“混合”进入改组件本身的选项。
其实就是vue对象script的合并
注意
不同组件混入之后,会生成不同的实例,数据会相互隔离,互不影响
2. 简单例子
myMixins.js
export default {
created () {
// 钩子函数,在组件的created方法执行之前,调用hello方法
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
Test1.vue
<template>
<div></div>
</template>
<script>
// 导入myMixins
import myMixins from './component/myMixins'
export default {
// 进行混入
mixins: [myMixins],
name: 'Test1'
}
</script>
<style scoped>
</style>
结果:混入的选项等同于组件的选项
3. 合并内容
1. data对象
data对象会进行递归合并,如果有冲突,会使用组件中的数据
myMixins.js
export default {
data () {
return {
// myMixins中定义的变量
message: 'hello',
foo: 'abc'
}
},
created () {
// 钩子函数,在组件的created方法执行之前,调用hello方法
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
Test1.vue
<template>
<div></div>
</template>
<script>
// 导入myMixins
import myMixins from './component/myMixins'
export default {
// 进行混入
mixins: [myMixins],
name: 'Test1',
data () {
return {
// Test1中定义的变量
message: 'goodbye',
bar: 'def'
}
},
created () {
// 打印数据
console.log(this.$data)
}
}
</script>
<style scoped>
</style>
结果:message合并,使用了组件中定义的值,foo和bar都被保留
2. 钩子函数
钩子函数会被合并起来执行,先执行混入的钩子函数,再执行组件对应的钩子函数
myMixins.js
export default {
data () {
return {
// myMixins中定义的变量
message: 'hello',
foo: 'abc'
}
},
created () {
// 钩子函数,在组件的created方法执行之前,调用hello方法
this.hello()
},
mounted () {
// myMixins中的mounted钩子函数
console.log('mixins mounted...')
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
Test1.vue
<template>
<div></div>
</template>
<script>
// 导入myMixins
import myMixins from './component/myMixins'
export default {
// 进行混入
mixins: [myMixins],
name: 'Test1',
data () {
return {
// Test1中定义的变量
message: 'goodbye',
bar: 'def'
}
},
created () {
// 打印数据
console.log(this.$data)
},
mounted () {
// Test1中的mounted钩子函数
console.log('Test1 mounted...')
}
}
</script>
<style scoped>
</style>
结果: 执行顺序
- myMixins中的created
- Test1中的created
- myMixins中的mounted
- Test1中的mounted
3. 值为对象的选项,例如method,components,directives等
将会被合并成一个大对象,如果有冲入,以组件中的选项为准
myMixins.js
export default {
data () {
return {
// myMixins中定义的变量
message: 'hello',
foo: 'abc'
}
},
methods: {
// myMixins中的method方法列表
hello () {
console.log('hello from mixin!')
},
hello2 () {
console.log('hello2 from mixin!')
}
}
}
Test1.vue
<template>
<div></div>
</template>
<script>
// 导入myMixins
import myMixins from './component/myMixins'
export default {
// 进行混入
mixins: [myMixins],
name: 'Test1',
data () {
return {
// Test1中定义的变量
message: 'goodbye',
bar: 'def'
}
},
created () {
// 调用方法
this.hello()
this.hello2()
},
methods: {
// Test1中的method方法列表
hello2 () {
console.log('hello2 from test1')
}
}
}
</script>
<style scoped>
</style>
结果:
- hello方法没有冲突,使用mixins中的
- hello2方法有冲突,使用组件中的
4. 全局混入
混入分为组件混入和全局混入
-
组件混入:每个组件单独按需进行混入
-
全局混入:一旦进行全局混入,它将影响每一个之后创建的 Vue 实例(包括第三方组件),所以需要慎重
myMixins.js
export default {
data () {
return {
// myMixins中定义的变量
message: 'hello',
foo: 'abc'
}
},
created () {
console.log('hello from mixin!')
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import myMixins from '@/views/mixins-test/component/myMixins'
Vue.config.productionTip = false
// 全局混入
Vue.mixin(myMixins)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Test1.vue
<template>
<div></div>
</template>
<script>
export default {
// 进行混入
name: 'Test1'
}
</script>
<style scoped>
</style>
结果:之后每个创建的组件都混入了这些选项,导致访问一个路由组件,其中创建的每个组件都打印了created的处理
5. 扩展
1. 与vuex的区别
vuex:用来做状态管理,里面定义的变量每个组件都可以查看和修改,共享一分数据,一般只能存储属性和方法,不能存放钩子函数
mixins:可以用来定义公用变量、方法,总的钩子函数等。在组件混入之后,每个组件各自维护一份变量,相互隔离
2. 与公共组件的区别
组件:在父组件中引入公共组件之后,相当于引入了一个公共子组件,通过props等方式进行组件传值,但本质上是相互独立的
mixins:在引入组件之后,于组件中的对象和方法进行合并,相当于扩展了父组件的对象和方法,可以理解为形成了一个新的组件
更多推荐
所有评论(0)