Vue 内でミックスインを使用する

今回は、Vue で mixin を使用する際の注意点と、Vue で mixin を使用する際の注意点についてお届けします。以下は実践的なケースです。

vue のミックスインについての私の理解を話しましょう

Vue は、コンポーネントのコンテンツをより効率的に再利用するために使用される、混合メカニズム mixins を提供します。最初は、これとコンポーネントに違いはないと思いました。 。後でそれは間違いだと分かりました。通常の状況におけるミックスインとインポートされたコンポーネントの違いを見てみましょう。

コンポーネントが参照された後、親コンポーネントの props からの値に基づいて対応する操作を実行するために、親コンポーネント内に別のスペースを開くことと同等ですが、本質的には、この 2 つは依然として別個であり、比較的独立しています。 。

そして、ミックスインは、コンポーネントを導入した後、データやその他のメソッド、メソッドやその他の属性などのコンポーネントの内部コンテンツを、親コンポーネントの対応するコンテンツとマージします。導入後、親コンポーネントの各種属性メソッドが拡張されたことに相当します。

単純なコンポーネントリファレンス:

親コンポーネント + 子コンポーネント>>> 親コンポーネント + 子コンポーネント

ミックスイン:

親コンポーネント+子コンポーネント>>> 機能: 複数のコンポーネントが共有可能データとメソッドをミックスインを使用してコンポーネントに導入すると、ミックスイン内のメソッドとプロパティがコンポーネントに組み込まれ、直接使用できるようになります。両方のフック関数が呼び出され、ミックスイン内のフックが最初に実行されます。

vue mixinの使い方の紹介です 具体的な紹介は以下の通りです

1. jsファイル(mixin.js)を定義します

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

使い方についてはvueのドキュメントに詳しく紹介されています。ここでは vue ファイルで mixin を使用する での使用方法のみを紹介します。

2. vue ファイルで mixin を使用する

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がVue 内でミックスインを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。