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

今回は、Vue で mixin を使用する方法と、Vue で mixin を使用する際の 注意事項 を​​説明します。実際の事例を見てみましょう。

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

これは、親コンポーネントの 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 フロントエンド開発の仕様とは何ですか

JS を使用して DOM 要素の絶対位置を取得する方法

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