Vueコンポーネントの基本のまとめ

コンポーネントの基本

1 コンポーネントの再利用

コンポーネントは再利用可能な Vue インスタンスです。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<ボタン カウンター></ボタン カウンター>
			<ボタン カウンター></ボタン カウンター>
			<ボタン カウンター></ボタン カウンター>
		</div>
  <スクリプト>
			// button-counterという新しいコンポーネントを定義します Vue.component('button-counter', {
				データ: 関数 () {
					戻る {
						カウント: 0
					}
				},
				テンプレート: '<button v-on:click="count++">{{ count }} 回クリックしました。</button>'
			});

			新しい Vue({ el: '#app' });
  </スクリプト>
 </本文>
</html>

ボタンをクリックすると、各コンポーネントのカウントが個別に維持されることに注意してください。ここで、カスタムコンポーネントのデータプロパティは関数である必要があり、各インスタンスは返されたオブジェクトの独立したコピーを保持します。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<ボタン カウンター></ボタン カウンター>
			<ボタン カウンター></ボタン カウンター>
			<ボタン カウンター></ボタン カウンター>
		</div>
  <スクリプト>
			var ボタンカウンタデータ = {
				カウント: 0
			}
			// button-counterという新しいコンポーネントを定義します Vue.component('button-counter', {
				データ: 関数 () {
					戻るボタンCounterData
				},
				テンプレート: '<button v-on:click="count++">{{ count }} 回クリックしました。</button>'
			});

			新しい Vue({ el: '#app' });
  </スクリプト>
 </本文>
</html>

2 Propsを介して子コンポーネントにデータを渡す

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<blog-post title="Vue との旅"></blog-post>
			<blog-post title="Vue を使用したブログ作成"></blog-post>
			<blog-post title="Vue が楽しい理由"></blog-post>
		</div>
  <スクリプト>
			Vue.component('ブログ投稿', {
				プロパティ: ['タイトル'],
				テンプレート: '<h3>{{ title }}</h3>'
			})

			新しい Vue({ el: '#app' });
  </スクリプト>
 </本文>
</html>

ここで、 <blog-post>コンポーネントはカスタム属性titleを介してデータを渡します。
v-bindを使用して props を動的に渡すことができます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<blog-post v-for="投稿内の投稿" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
		</div>
  <スクリプト>
			Vue.component('ブログ投稿', {
				プロパティ: ['タイトル'],
				テンプレート: '<h3>{{ title }}</h3>'
			})

			新しいVue({
				el: '#app',
				データ： {
					投稿:
						{ id: 1, title: 'Vue との旅' },
						{ id: 2, title: 'Vue でブログを書く' },
						{ id: 3, title: 「なぜ Vue は楽しいのか」 }
					]
				}
			});
  </スクリプト>
 </本文>
</html>

3 単一のルート要素

各コンポーネントにはルート要素が 1 つだけ必要です。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
		</div>
  <スクリプト>
			Vue.component('ブログ投稿', {
				プロパティ: ['post'],
				テンプレート: `
					<div class="ブログ投稿">
						<h3>{{ 投稿.タイトル }}</h3>
						<div v-html="投稿コンテンツ"></div>
					</div>
				`
			})

			新しいVue({
				el: '#app',
				データ： {
					投稿:
						{ id: 1、タイトル: 'Vue との旅'、コンテンツ: '私の旅...' }、
						{ id: 2、タイトル: 'Vue でブログを書く'、コンテンツ: '私のブログ...' }、
						{ id: 3、title: 「Vue が楽しい理由」、content: 「Vue はとても楽しい...」 }
					]
				}
			});
  </スクリプト>
 </本文>
</html>

v-bind:post="post" によってバインドされた投稿はオブジェクトであるため、多くのプロパティを介してデータを渡す手間が省けることに注意してください。

4 サブコンポーネントイベントのリッスン

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="投稿内の投稿" 
					v-bind:key="post.id" 
					v-bind:post="投稿"
					v-on:enlarge-text="postFontSize += 0.1" />
			</div>			
		</div>
  <スクリプト>
			Vue.component('ブログ投稿', {
				プロパティ: ['post'],
				テンプレート: `
					<div class="ブログ投稿">
						<h3>{{ 投稿.タイトル }}</h3>
						<button v-on:click="$emit('enlarge-text')">テキストを拡大する</button>
						<div v-html="投稿コンテンツ"></div>
					</div>
				`
			})

			新しいVue({
				el: '#app',
				データ： {
					投稿フォントサイズ: 1,
					投稿:
						{ id: 1、タイトル: 'Vue との旅'、コンテンツ: '私の旅...' }、
						{ id: 2、タイトル: 'Vue でブログを書く'、コンテンツ: '私のブログ...' }、
						{ id: 3、title: 「Vue が楽しい理由」、content: 「Vue はとても楽しい...」 }
					]
				}
			});
  </スクリプト>
 </本文>
</html>

子コンポーネントは、 $emitメソッドを使用してイベント名を渡すことでイベントをトリガーします。親コンポーネントはこのイベントを受信できます。

イベントを使用して値をスローすることができます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="投稿内の投稿" 
					v-bind:key="post.id" 
					v-bind:post="投稿"
					v-on:enlarge-text="postFontSize += $event" />
			</div>			
		</div>
  <スクリプト>
			Vue.component('ブログ投稿', {
				プロパティ: ['post'],
				テンプレート: `
					<div class="ブログ投稿">
						<h3>{{ 投稿.タイトル }}</h3>
						<button v-on:click="$emit('enlarge-text', 0.2)">フォントを拡大する</button>
						<div v-html="投稿コンテンツ"></div>
					</div>
				`
			})

			新しいVue({
				el: '#app',
				データ： {
					投稿フォントサイズ: 1,
					投稿:
						{ id: 1、タイトル: 'Vue との旅'、コンテンツ: '私の旅...' }、
						{ id: 2、タイトル: 'Vue でブログを書く'、コンテンツ: '私のブログ...' }、
						{ id: 3、title: 「Vue が楽しい理由」、content: 「Vue はとても楽しい...」 }
					]
				}
			});
  </スクリプト>
 </本文>
</html>

親コンポーネントでは、$event を通じてスローされた値にアクセスできます。
コンポーネントで v-model を使用できます。

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<!-- <input v-model="searchText"> -->
			<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
			<p>{{ 検索テキスト }}</p>
		</div>
  <スクリプト>
			新しいVue({
				el: '#app',
				データ： {
					検索テキスト: ''
				}
			});
  </スクリプト>
 </本文>
</html>
<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8">  
  <スタイル>
   
  </スタイル>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <本文>
		<div id="アプリ">
			<カスタム入力 v-model="検索テキスト"></カスタム入力>
			<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
			<p>{{ 検索テキスト }}</p>
		</div>
  <スクリプト>
			Vue.component('カスタム入力', {
				プロパティ: ['値'],
				テンプレート: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
			})

			新しいVue({
				el: '#app',
				データ： {
					検索テキスト: ''
				}
			});
  </スクリプト>
 </本文>
</html>

最後に、DOM テンプレートを解析する際の注意事項です。

以上がVueコンポーネントの基礎知識のまとめの詳しい内容です。Vueコンポーネントについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご覧ください！

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