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

要約する

MySQL全文インデックスの原理と欠点

Centos7.4 環境に lamp-php7.0 をインストールするチュートリアル

MIME TYPEとは？MIME-Typesタイプコレクション

Vue シンプル登録ページ + 確認コード送信機能の実装例

Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル

jquery-multiselect を使用した IE6 のバグの解決方法

Dockerでmongodbデータベースを使用するための実装コード

Linux SecureCRT の文字化けの解決方法

React で setInterval 関数を使用する例

CocosCreator MVCアーキテクチャの詳細な説明

推薦する

Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル

JSはキャンバス技術を使用してeChartsの棒グラフを模倣します

Webリクエストと処理のTomcatソースコード分析

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

Windows に Docker と docker-compose スイートをインストールするための詳細なチュートリアル

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

Docker 用ビジュアル UI 管理ツール Portainer のインストールと使用方法の分析

Centos7 での MySQL 5.7.20 のインストールと設定に関する詳細なチュートリアル

HTML は CSS スタイルと JS スクリプトを動的に読み込みます。例

Springboot アプリケーションを迅速にデプロイするために Docker とアイデアを統合する詳細なプロセス

MySQLデータベースのbinlogクリーンアップコマンドの詳細な説明

MYSQLの文字セット設定方法（端末の文字セット）の詳しい説明

Nginx ログのカスタマイズとログバッファの有効化の詳細な説明

Javascriptジェネレータの紹介と使用

Mysql はテーブル内の古いデータを定期的にクリアし、いくつかのデータを保持します (推奨)