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

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストールチュートリアル

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

目次

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

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

3. 父から息子へ

4. 息子から父へ

5. スロット

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

要約する

MySQL 8.0.16 圧縮版のダウンロードと Win10 システムへのインストールチュートリアル

SSHを使用してDockerサーバーに接続する方法

ドラッグ位置プレビューを実装するネイティブJS

HTML要素のID属性とName属性の違い

HTML でフロートをクリアする 2 つの方法

webpackの遅延読み込みとプリロードの詳細な説明

MySQLでSQL文がどのように実行されるかの詳細な説明

JS オブジェクト配列の重複排除のための 3 つの方法の例と比較

MySQLストアドプロシージャを変更する詳細な手順

XHTML CSS ウェブサイトデザインの利点と問題点

推薦する

MySQL では UTF-8 が推奨されないのはなぜですか?

モバイルウェブページのサイズ調整を実装する方法

枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)

インターフェースなしで Centos7 に JDK と Tomcat をデプロイするチュートリアル

Centos8 で yum を使用して mongodb 4.2 をインストールする方法

JavaScript 配列の Reduce() メソッドの構文と例の分析

Firefox の CSS を使用してデータを盗む

LinuxシステムのAnsible自動運用保守導入方法

チェックボックスの選択またはキャンセルを実装するJavaScript

初心者がHTMLタグを学ぶ（3）

単一のdivの正多角形変換を実現する純粋なCSS

ReactのsetStateがマクロタスクなのかマイクロタスクなのかについて詳しく話しましょう

spring-boot と docker-java に基づいて Docker コンテナの動的な管理と監視を実装します [完全なソースコードのダウンロード付き]

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

VMware 仮想マシンのインストール Linux システムのグラフィックチュートリアル