Summary of vue Component Basics

2021-10-25 05:40:49
OfStack

Component foundation

1 component reuse

Component is a reusable instance of Vue.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
  <script>
			//  Definition 1 A person named  button-counter  New components of 
			Vue.component('button-counter', {
				data: function () {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++"> Clicked  {{ count }}  Times .</button>'
			});

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

Note that when the button is clicked, each component maintains its count independently. Here, the data attribute of the custom component must be a function, and each instance maintains a separate copy of the returned object.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
  <script>
			var buttonCounterData = {
				count: 0
			}
			//  Definition 1 A person named  button-counter  New components of 
			Vue.component('button-counter', {
				data: function () {
					return buttonCounterData
				},
				template: '<button v-on:click="count++"> Clicked  {{ count }}  Times .</button>'
			});

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

2 Passing data to subcomponents through Prop


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post title="My journey with Vue"></blog-post>
			<blog-post title="Blogging with Vue"></blog-post>
			<blog-post title="Why Vue is so fun"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['title'],
				template: '<h3>{{ title }}</h3>'
			})

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

Here <blog-post> Component is created through custom properties title To transfer data.
We can use v-bind To dynamically pass prop.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['title'],
				template: '<h3>{{ title }}</h3>'
			})

			new Vue({
				el: '#app',
				data: {
					posts: [
						{ id: 1, title: 'My journey with Vue' },
						{ id: 2, title: 'Blogging with Vue' },
						{ id: 3, title: 'Why Vue is so fun' }
					]
				}
			});
  </script>
 </body>
</html>

3 Single root element

Each component must have only 1 root element.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<div v-html="post.content"></div>
					</div>
				`
			})

			new Vue({
				el: '#app',
				data: {
					posts: [
						{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
						{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
						{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]
				}
			});
  </script>
 </body>
</html>

Note that v-bind: post= "post" The bound post is one object, which avoids the hassle of passing data through many prop.

4 Listening for Subcomponent Events


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="post in posts" 
					v-bind:key="post.id" 
					v-bind:post="post"
					v-on:enlarge-text="postFontSize += 0.1" />
			</div>			
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text')"> Enlarge the font </button>
						<div v-html="post.content"></div>
					</div>
				`
			})

			new Vue({
				el: '#app',
				data: {
					postFontSize: 1,
					posts: [
						{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
						{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
						{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]
				}
			});
  </script>
 </body>
</html>

Subcomponents pass through $emit Method and pass in the event name to trigger 1 event. The parent component can receive this event.

We can use events to throw a value.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="post in posts" 
					v-bind:key="post.id" 
					v-bind:post="post"
					v-on:enlarge-text="postFontSize += $event" />
			</div>			
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text', 0.2)"> Enlarge the font </button>
						<div v-html="post.content"></div>
					</div>
				`
			})

			new Vue({
				el: '#app',
				data: {
					postFontSize: 1,
					posts: [
						{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
						{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
						{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]
				}
			});
  </script>
 </body>
</html>

In the parent component, we can access the thrown value through $event.
We can use v-model on components.


<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<!-- <input v-model="searchText"> -->
			<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
			<p>{{ searchText }}</p>
		</div>
  <script>
			new Vue({
				el: '#app',
				data: {
					searchText: ''
				}
			});
  </script>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<custom-input v-model="searchText"></custom-input>
			<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
			<p>{{ searchText }}</p>
		</div>
  <script>
			Vue.component('custom-input', {
				props: ['value'],
				template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
			})

			new Vue({
				el: '#app',
				data: {
					searchText: ''
				}
			});
  </script>
 </body>
</html>

Finally, pay attention to the considerations when parsing DOM templates.

The above is the vue component basics summary of the details, more information about vue components please pay attention to other related articles on this site!