局部混入
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
例:
//创建mixin.js
import ExampleComponent from 'components/exampleComponent/ExampleComponent'
export const item1Mixin = {
data() {
return {
message1:'hello1'
}
},
mounted() {
},
components:{
ExampleComponent
}
}
export const item2Mixin = {
data() {
return {
message2:'hello2'
}
},
mounted() {
},
components:{
}
}
在.vue组件中:
<template>
<div>{{message1}}</div>
<div>{{message2}}</div>
</template>
<script>
import { itemMixin,item2Mixin } from 'common/mixin'
export default {
mixins: [itemMixin,item2Mixin ]
}
</script>
这样引用后,在vue组件中就可以使用mixin.js文件中定义的东西。
全局混入
要慎用全局混入,一旦使用全局混入,它将影响每一个之后创建的Vue实例。
//main.js中添加全局混入
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.mixin({
data() {
return {
message: '哈哈'
}
},
methods: {
mixinMethod() {
console.log(this.message+',这是mixin混入的方法')
}
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
在组件中直接使用
<template>
<div>{{msg}}</div>
</template>
<script>
export default {
data() {
return {
}
}
mounted() {
this.mixinMethod()
}
}
// 哈哈,这是mixin混入的方法
</script>
混入的选择合并
数据对象:数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
钩子:同名钩子函数将合并为一个数组,因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用"
值为对象的选项:比如methods,将被合并为同一个对象,两个对象键名冲突时,取组件对象的键值对。
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"