Vue3 ミックスイン

ミックスイン (mixins) は、再利用可能なメソッドまたは算出プロパティの一部を定義します。ミックスインオブジェクトは任意のコンポーネントオプションを含むことができます。コンポーネントがミックスインオブジェクトを使用するとき、すべてのミックスインオブジェクトのオプションはそのコンポーネント自身のオプションに混入されます。

簡単な例を見てみましょう：

例

//ミックスインオブジェクトを定義 const myMixin = { created() { this.hello() }, methods: { hello() { console.log('ミックスインの例へようこそ - サンプル!') } } } //アプリケーションを定義して、ミックスインを使用 const app = Vue.createApp({ mixins: [myMixin] }) app.mount('#app') //=> "ミックスインの例へようこそ - サンプル!"

試してみる »

オプションのマージ

コンポーネントとミックスインオブジェクトに同名のオプションがある場合、これらのオプションは適切な方法で混合されます。

例えば、データオブジェクトは内部的に浅いマージ（1階層のプロパティ深度）が行われ、コンポーネントのデータと競合する場合はコンポーネントのデータが優先されます。

次の例では、Vue インスタンスとミックスインオブジェクトに同じメソッドが含まれています。出力結果から、2つのオプションがマージされていることがわかります。

例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vueテスト例 - サンプル(サンプル.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id = "app"></div> <script type = "text/javascript"> const myMixin = { data() { return { message: 'hello', foo: 'サンプル' } } } const app = Vue.createApp({ mixins: [myMixin], data() { return { message: 'goodbye', bar: 'def' } }, created() { document.write(JSON.stringify(this.$data)) } })

出力結果は次のとおりです：

{"message":"goodbye","foo":"サンプル","bar":"def"}

試してみる »

同名のフック関数は配列にマージされ、すべて呼び出されます。さらに、mixin オブジェクトのフックはコンポーネント自身のフックより前に呼び出されます。

const myMixin = {
  created() {
    console.log('mixin 对象的钩子被调用')
  }
}

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('组件钩子被调用')
  }
})

// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

値がオブジェクトであるオプション（methods、components、directives など）は、同じオブジェクトにマージされます。2つのオブジェクトのキー名が衝突する場合は、コンポーネントオブジェクトのキーと値のペアが採用されます。

例

const myMixin = { methods: { foo() { console.log('foo') }, conflicting() { console.log('from mixin') } } } const app = Vue.createApp({ mixins: [myMixin], methods: { bar() { console.log('bar') }, conflicting() { console.log('from self') } } }) const vm = app.mount('#app') vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

上記の例では、次の3つのメソッドを呼び出しました：

vm.foo();
vm.bar();
vm.conflicting();

出力結果から、methods オプションに同じ関数名がある場合は、Vue インスタンスが優先され、その出力が実行されます。

グローバルミックスイン

ミックスインオブジェクトをグローバルに登録することもできます。使用には注意してください！ グローバルミックスインオブジェクトを使用すると、その後作成されるすべての Vue インスタンスに影響します。適切に使用すれば、カスタムオブジェクトに処理ロジックを注入できます。

例

const app = Vue.createApp({ myOption: 'hello!' }) //カスタムオプション 'myOption' にハンドラを注入します。 app.mixin({ created() { const myOption = this.$options.myOption if (myOption) { document.write(myOption) } } }) app.mount('#app') // => "hello!"

試してみる »

グローバルミックスインオブジェクトは、個別に作成されたすべての Vue インスタンス（サードパーティのテンプレートを含む）に影響を与えるため、慎重に使用してください。

その他の拡張