vue のミックスインの使い方と注意事項について詳しくはこちら

この記事では、Vueにおけるミックスイン(ミキシング)の特徴を理解し、ミックスインの使い方や注意点などを紹介していきますので、皆様のお役に立てれば幸いです。

#ミックスインの基本概要

vue での説明は次のようになります。退屈な部分は自分でスキップできます~

Mixins: Vue コンポーネントで再利用可能な関数を配布するための非常に柔軟な方法です。ミックスインには、任意のコンポーネント オプションを含めることができます。コンポーネントがミックスイン オブジェクトを使用する場合、ミックスイン オブジェクトのすべてのオプションはコンポーネント自体のオプションに混合されます。 ＃＃＃＃＃＃使い方？

#例:

ミックスイン オブジェクトを定義する

ミックスイン オブジェクトを現在のコンポーネントにミックスする

使い方は至って簡単そう

#mixins の特徴

1 メソッドとパラメータ コンポーネント間で共有されません

混合オブジェクトのパラメータ num

コンポーネント 1 のパラメータ num は 1

の操作を実行します

コンポーネント 2 のパラメータ num は操作されていません

#2 つのコンポーネントによって出力される num 値を見てください

#ご覧のとおり、コンポーネント 1 の num の値を変更しましたが、コンポーネント 2 の num の値は初期値のままです。値がオブジェクトに混合されました

2 値は、メソッド、コンポーネントなどのオブジェクトのオプションです。オプションはマージされ、キーが競合するコンポーネントは混合オブジェクトの # を上書きします。

##混合オブジェクト内のメソッド

コンポーネント内のメソッド

## の出力print table

3 値が関数であるオプション (created、mounted など) はマージされて呼び出されます。混合オブジェクト内のフック関数コンポーネントのフック関数の前に呼び出されます。

#オブジェクト関数に混合コンソール

#コンソール

コンポーネント関数のコンソールの

##vuex と vuex の違い

上記の例を見てみると、両者の違いは明らかです~

vuex: 状態管理に使用されます。定義された変数は、各コンポーネントで使用および変更できます。この変数の値の後いずれかのコンポーネントで変数が変更されると、他のコンポーネントのこの変数の値もそれに応じて変更されます。

ミックスイン: 共有変数は各コンポーネントで定義して使用できます。コンポーネントに導入された後、各変数は互いに独立しており、値の変更はコンポーネント内で相互に影響しません。 #パブリック コンポーネントとの違い

同じ明らかな違いを再度リストします~

コンポーネント: 親コンポーネント内a コンポーネントは、子コンポーネントが使用できるように親コンポーネントに独立したスペースを与え、props に基づいて値を渡すことと同じですが、本質的にこの 2 つは比較的独立しています。

ミックスイン: コンポーネントが導入された後、コンポーネントはコンポーネント内のオブジェクトおよびメソッドとマージされます。これは、親コンポーネントのオブジェクトおよびメソッドを拡張することに相当し、新しいコンポーネントを形成すると理解できます。

関連する推奨事項:「vue.js チュートリアル 」

以上がvue のミックスインの使い方と注意事項について詳しくはこちらの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。