1. コンポーネントを使用するための 3 つのステップ:
- コンポーネント コンストラクターを作成します。Vue.extend() メソッドを呼び出してコンポーネント コンストラクターを作成します。
- コンポーネントの登録: Vue.component() メソッドを呼び出してコンポーネントを登録します。
- コンポーネントの使用: Vue インスタンスのスコープ内でコンポーネントを使用します。
例は次のとおりです。
(1) ローカルコンポーネントとグローバルコンポーネントの単純なケース
(2) 親コンポーネントと子コンポーネントの単純なケース:
2. コンポーネントを登録するための糖衣構文:
(1) グローバルコンポーネントの定義方法：
(2) ローカルコンポーネントの定義方法：
糖衣構文は次のように記述されます (extend メソッドを省略し、対応するコンポーネントをコンポーネント メソッドに直接記述します)。
3. コンポーネント データを保存します (関数 data() を使用する必要があります)。
コンポーネントは再利用できるため、 function メソッドを使用する目的は、同じタイプの複数のコンポーネント オブジェクトがデータを共有して汚染を引き起こすことを防ぐことです。ただし、範囲が制限されているため、この機能は各コンポーネントによって生成されたデータの干渉を防ぐことができます。
4. 親コンポーネントと子コンポーネント間の通信方法:
(1) 親コンポーネントは、props (渡せる配列またはオブジェクト) を通じて子コンポーネントにデータを渡します。
ステップ 1: 親コンポーネントのデータを指すように props で変数配列/オブジェクトを定義します。
注: たとえば、props で名前が付けられた wballstars の場合、親コンポーネントのデータをキャメルケースで動的にバインドする場合は、それを w-ball-stars として記述し、-connection 構文を使用する必要があります (図を参照) 、wBallStars として定義されている場合は、動的にバインドします。通常は、大文字と小文字を区別するために - を使用します)。
ステップ 2: コンポーネントが HTML ファイルで使用される親コンポーネントのデータを動的にバインドする
補足: props (通過可能な配列またはオブジェクト)、多目的オブジェクトを開発できるようになりました。
配列を渡します。
オブジェクトを渡す:
(2) 子コンポーネントはイベントを通じて親コンポーネントに情報を送信します。
ステップ 1: 子コンポーネントはメソッド メソッドによって作成され、イベント (イベント名と渡された情報を含む) を親コンポーネントに送信します。
ステップ 2: 親コンポーネントは、イベントをリッスンして親コンポーネントのメソッドを呼び出し、対応する関数を完了します。
5. コンポーネント間のアクセス: 子または参照を使用してアクセスします。
場合：
(1) 子を使用します (この場合、子配列には 3 つのデータがあります):
親コンポーネントのメソッド内のコードは次のとおりです。
(2) refを使用する
親コンポーネントのメソッド内のコードは次のとおりです。
6. サブコンポーネントから親コンポーネントへのアクセス: 親またはルート
ただし、この 2 つの違いに注意してください (親は上位レベルのコンポーネントまたは vue インスタンスにアクセスし、ルートはルート コンポーネント、つまり vue インスタンスにアクセスします)
