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バックアップとリカバリの実践に関する詳細な説明

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

目次

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

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

3. 父から息子へ

4. 息子から父へ

5. スロット

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

要約する

JavaScript ベースのランダム点呼システムの実装

JavaScriptはボタンをクリックして4桁のランダムな検証コードを生成します

Docker を使用した Alibaba Cloud Server のインストールと、仮想マシンへのインストールで遭遇する落とし穴 (問題のまとめ)

MySQL接続クエリの原理と応用

アイデア展開Tomcatサービス実装プロセス図

見栄えの良い CSS カスタムスタイル (タイトル h1 h2 h3)

Ubuntu 上の MySQL における中国語文字化け問題の解決方法

Linux ログ内のキーワードとその前後の情報を検索する方法の例

MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQL サービスとデータベース管理

推薦する

Mysql のフィールドのデータの一部をバッチ置換する (推奨)

Linuxでユーザーが所属するグループを変更する方法

Vue で親子コンポーネントの値を双方向バインドするために v-model を使用するときに発生する問題と解決策

HTML フォーム送信アクションと URL ジャンプアクションの違い

無料のパブリック STUN サーバー

擬似分散グラフィックを実現するための VMware 構成 Hadoop チュートリアル

MySQL移行計画と落とし穴の実践記録

HTML でスクロールバーを非表示にしたり削除したりする方法

jar パッケージを Docker コンテナに変換する方法

Vueコンポーネントのルーティング強調表示問題の解決策

js キャンバスはランダムなパーティクル効果を実現します

Vueのトグルボタンをクリックしてボタンを有効にし、無効にします。

CSS を使用して半透明の背景と不透明なテキストを実現する例

vue $http の get および post リクエストのクロスドメイン問題を解決する

HTML で dl(dt,dd)、ul(li)、ol(li) を使用する方法