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. サブコンポーネントはスロットに値を渡す

要約する

Linux で毎日データベースの自動バックアップを設定する方法

ES6の新機能に関する最もよく使われる知識ポイントのまとめ

CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明

MySQL 8.0の新機能、隠しフィールドの詳細な説明

ReactでuseStateを使用する詳細な例

editplus の Zen コーディング例コードの説明

HTML4.0 要素のデフォルトスタイルの配置

Docker プライベートサーバーイメージを定期的にクリーンアップする方法

HTML テーブルの境界線を設定する際のヒント

CSS3.0 でネオンボタンアニメーション効果を実装するためのサンプルコード

推薦する

HTMLでvueとelement-uiを直接参照する方法

Linux で MySQL データベースのデータファイルパスを変更する手順

Linux でファイル内の特定の文字の数を数える方法

4 つの主要な SQL ランキング関数 ROW_NUMBER、RANK、DENSE_RANK、NTILE の使用方法の紹介

vue-element-admin プロジェクトのインポートとエクスポートの実装

MySQLのサブクエリユニオンの効率性についての簡単な説明と

jsは画像切り取り機能を実現する

MySQL におけるデータベース間関連クエリメソッド

Vue での keepAlive の使用例の詳細な説明

CSS--overflow:hidden のプロジェクト例

ReactアプリケーションにおけるDOM DIFFアルゴリズムの詳細な説明

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

MySQLで指定した時間前にレコードを自動的に削除する方法

XHTML 入門チュートリアル: フォームタグ

Linux で実行中のバックグラウンドプログラムを表示および終了する方法