混入
ディレクトリ
基本
mixin ) は、非常に優れた機能を提供します。 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!"オプションのマージ
コンポーネントとミックスイン オブジェクトに同じ名前のオプションが含まれている場合、これらのオプションは適切な方法で「マージ」されます。
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" }
}
})同じ名前のフック関数は配列にマージされるため、すべて呼び出されます。さらに、混合オブジェクトのフックは、コンポーネント自体のフック の前に と呼ばれます。 methods
、components、directives など、
var mixin = {
created: function () {
console.log('混入对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
// => "混入对象的钩子被调用"
// => "组件钩子被调用" 値がオブジェクトであるオプションは、同じオブジェクトにマージされます。 2 つのオブジェクトのキー名が競合する場合、コンポーネント オブジェクトのキーと値のペアが取得されます。 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 インスタンス (サードパーティ コンポーネントを含む) に影響するため、注意して使用してください。ほとんどの場合、これは上記の例のようなカスタム オプションにのみ適用されます。アプリケーション ミックスインの繰り返しを避けるために、
plugin
カスタム オプションはデフォルトの戦略を使用しますこれは、既存の値を単に上書きすることを意味します。カスタム オプションをカスタム ロジックとマージしたい場合は、関数を
Vue.config.optionMergeStrategiesに追加できます:
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// 返回合并后的值
}
methods
var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods
より高度な例は、Vuex 1.x のミックスイン戦略にあります: 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)
}
}
