오염
디렉토리
기본
Mixins는 Vue 구성 요소에 재사용 가능한 기능을 배포하는 매우 유연한 방법을 제공합니다. 믹스인에는 모든 구성 요소 옵션이 포함될 수 있습니다. 구성 요소가 믹스인을 사용하면 해당 믹스인의 모든 옵션이 구성 요소 자체의 옵션에 "혼합"됩니다.
예:
// 定义一个混入对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"Option Merging
구성 요소와 믹스인에 동일한 이름의 옵션이 포함된 경우 이러한 옵션은 적절한 방식으로 "병합"됩니다.
예를 들어 데이터 객체는 내부적으로 재귀적으로 병합되며, 충돌이 발생하면 구성 요소 데이터가 우선 적용됩니다.
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" }
}
})동일한 이름을 가진 Hook 함수들은 배열로 합쳐져서 모두 호출되게 됩니다. 또한 구성 요소 자체 후크 이전에 혼합 개체의 후크가 호출됩니다.
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用" 메서드, 구성요소, 지시문 등 값이 객체인 옵션은 동일한 객체로 병합됩니다. 두 개체의 키 이름이 충돌하는 경우 구성 요소 개체의 키-값 쌍이 사용됩니다. methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
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"注意：Vue.extend() 也使用同样的策略进行合并。
全局混入
混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。
// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。
自定义选项合并策略
自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}对于多数值为对象的选项，可以使用与 methods
var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods참고:
Vue.extend()도 병합에 동일한 전략을 사용합니다.
Global mixin
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}🎜글로벌 믹스인은 개별적으로 생성된 모든 Vue 인스턴스(타사 구성 요소 포함)에 영향을 미치므로 주의해서 사용하세요. 대부분의 경우 이는 위의 예와 같이 사용자 정의 옵션에만 적용되어야 합니다. 반복되는 애플리케이션 믹스인을 방지하려면 플러그인🎜으로 게시하는 것이 좋습니다. 🎜🎜🎜🎜
