Vueでmixinを使う手順を詳しく解説

今回は、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 フロントエンド開発で注意する必要があること

JS で DOM 要素の位置を取得する方法

以上がVueでmixinを使う手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。