Vueのコンポーネントの詳細な説明

1. コンポーネントの登録

コンポーネントを登録する際に注意すべき点が 5 つあります。

1. データは関数として記述し、returnで値を返す必要があります。これにより、異なる呼び出しが互いに影響を及ぼさなくなります。

2. テンプレートという単語の後に浮動数字が続きます。これは Tab の上のキーです。

3. テンプレートの後のコンテンツは、複数のdivに分割するのではなく、大きなdivに記述する必要があります。

4. 以下は配列です。プロパティがたくさんあるためです。

5. jsファイルとして保存

Vue.component("myson",{
	データ（）{
		戻る {
			sonmsg:"こんにちは息子さん"
		}
	},
	テンプレート:`
	<div>
		<p>サブコンポーネントコンテンツ</p>
		prop が受け取った値: {{sonprop}}
	</div>
	`、
	小道具:["sonprop"],
	方法:{
		息子クリック(){
			this.$emit("sonemit",this.sonmsg)
		}
	}
})

2. コンポーネントの使用

使用時に注意すべき点が1つあります。まずvueを参照し、次にサブコンポーネントを参照する必要があります。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<タイトル></タイトル>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="00-component-child.js"></script>
	</head>
	<本文>
		<div id="アプリ">
			<マイソン></マイソン>
		</div>
		<script type="text/javascript">
			var vm = 新しい Vue({
				el:"#アプリ",
				データ：{
					parentmsg:"sonprop への parentmsg"
				}
			})
		</スクリプト>
	</本文>
</html>

3. 父から息子へ

父子相続は比較的単純で、2 つのステップに分かれています。

1. コンポーネント内のプロパティを定義する

小道具:["sonprop"]

2. コンポーネントを使用する場合、親の値を定義されたプロパティにバインドします。

<myson :sonprop="親メッセージ"></myson>

親の値は次のようになります

				データ：{
					parentmsg:"sonprop への parentmsg"
				}

詳しい送信手順は以下のとおりです。複雑に見えますが、実際には上記の 2 つの手順だけです。

4. 息子から父へ

子コンポーネントはメソッドを介して親に値を渡します。親と子はそれぞれメソッドを定義し、中間メソッドを使用して接続します。この中間メソッドの使用を覚えておいてください。細かく分解すると、かなり多くの手順があります。

1. サブコンポーネントテンプレートのボタンでクリックイベントを使用する

<button @click="sonclick">ボタン</button>

2. サブコンポーネントで上記で使用したメソッドを定義し、中間メソッドをトリガーしてデータを渡す

		息子クリック(){
			this.$emit("sonemit",this.sonmsg)
		}

3. 親が子コンポーネントを使用する場合、中間メソッドを使用して独自のメソッドをバインドします。

<myson @sonemit="親クリック"></myson>

4. 親メソッドでデータを受信する。pは任意の文字として記述できる。

        親クリック(p){
			vm.parentmsg = p;
		}

詳細なコード図

操作効果

5. スロット

1. スロットを追加します。スロットは、コンポーネントを使用するときに何でも挿入できるコンポーネント内のスペースです。

サブコンポーネント内のどこかに定義します: <slot></slot>

コンポーネントを使用する場合、この場所に任意のラベルを追加できます。

2. 複数のスロットを追加する場合は、各スロットに名前を付け、使用時に各スロットをテンプレートに配置します。

複数のスロットの定義

	テンプレート:`
	<div>
		<p>サブコンポーネントコンテンツ: {{sonmsg}}</p>
		<p>分割線 111111111111111</p>
		<スロット名="a1"></スロット>
		<p>区切り線 2222222</p>
		<スロット名="a2"></スロット>
		<p>分割線 333333333</p>
	</div>
	`、

複数のスロットを使用し、1 つのスロットにつき 1 つのテンプレートを使用します。

                <テンプレートスロット="a1">
					<button>ボタン a1</button>
				</テンプレート>
				<テンプレートスロット="a2">
					<button>ボタン a2</button>
				</テンプレート>

6. サブコンポーネントはスロットに値を渡す

1. サブコンポーネントテンプレートで中間データ emitmsg を定義します。名前は任意に指定できます。

<スロット名="a1" :emitmsg="sonmsg"></スロット>

2. 親コンポーネントで受信するには res を使用します。子コンポーネントがいくつあっても、受信には res が使用されます。res は結果セットです。スロットが複数ある場合は、その中にデータが含まれます。

				<テンプレートスロット="a1" スロットスコープ="res">
					{{res.emitmsg}}
				</テンプレート>

コードショーケース

表示効果:

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:

Vue でのルータービューコンポーネントの使用に関する詳細な説明
Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
VUE ユニアプリカスタムコンポーネントについての簡単な説明
VUE ユニアプリの基本コンポーネントの簡単な紹介
Vue開発の詳細な説明ソートコンポーネントコード

<<: CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

>>: MySQLバックアップとリカバリの実践に関する詳細な説明

Linux での Redis の永続性、マスタースレーブ同期、Sentinel の詳細な説明

Vueのコンポーネントの詳細な説明

目次

1. コンポーネントの登録

2. コンポーネントの使用

3. 父から息子へ

4. 息子から父へ

5. スロット

6. サブコンポーネントはスロットに値を渡す

要約する

Linux での Redis の永続性、マスタースレーブ同期、Sentinel の詳細な説明

JavaScript キャンバステトリスゲーム

Vueプロジェクトのパッケージ化の詳細な説明

ブラウザのURLの前に小さなアイコンを表示する方法

Vue における {{}}、v-text、v-html の違いと用途の詳細な説明

MySQL パラメータ関連の概念とクエリ変更方法

MySQL マスタースレーブレプリケーションの原理と実践の詳細な説明

HTMLハイパーリンクaタグのhrefジャンプとonclick間の実行順序の例

Windows 10 での MySQL 8.0.19 のインストールと設定のチュートリアル

VueとReactの詳細

推薦する

HTML テーブルタグチュートリアル (46): テーブルフッタータグ

JavaScript でオブジェクトをトラバースする 5 つの方法サンプルコード

マウスを画像の上に置いたときに画像の遷移アニメーション効果を実現する CSS

JavaScript キャンバスは影付きのグラフィックとテキストを実装します

Linux サーバーに Python3 をインストールする 2 つの方法

HTML のテキストエリアの改行問題の概要

vue+tsは要素のマウスドラッグの効果を実現します

Idea で Docker を使用して SpringBoot プロジェクトをデプロイする詳細な手順

JSはショッピングカート内の商品の合計金額の計算を実現します

Linux には make コマンドがありません (make: *** ターゲットが指定されておらず、makefile または make コマンドのインストール方法が見つかりません)

冗長カーネルを削除するLinuxディープインの実装方法

div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

.NETCore Dockerはコンテナ化とプライベートイメージリポジトリ管理を実装します

共有サイドバーを実装するためのネイティブJS

Ubuntu 18.04にPython仮想環境をインストールする