A detailed discussion of components in Vue

A detailed discussion of components in Vue

1. Component Registration

There are five points to note when registering components:

1. Data should be written as a function and return a value with return, so that different calls will not affect each other

2. The word template is followed by a floating number, which is the key above Tab.

3. The content after template should be written in a large div, not separated into multiple divs

4. The following is an array, because there are many props

5. Save as js file

Vue.component("myson",{
	data(){
		return {
			sonmsg:"hello son"
		}
	},
	template:`
	<div>
		<p>Subcomponent content</p>
		The value received by prop: {{sonprop}}
	</div>
	`,
	props:["sonprop"],
	methods:{
		sonclick(){
			this.$emit("sonemit",this.sonmsg)
		}
	}
})

2. Use of components

Just pay attention to one thing when using it, you must reference vue first, and then reference the subcomponent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="00-component-child.js"></script>
	</head>
	<body>
		<div id="app">
			<myson></myson>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:"#app",
				data:{
					parentmsg:"parentmsg to sonprop"
				}
			})
		</script>
	</body>
</html>

3. From Father to Son

The father-son inheritance is relatively simple and is divided into two steps.

1. Define props in components

props:["sonprop"]

2. When using a component, bind the parent's value with the defined prop

<myson :sonprop="parentmsg"></myson>

The value in the parent is like this

				data:{
					parentmsg:"parentmsg to sonprop"
				}

The detailed transmission process is as follows. It looks complicated, but it is actually just the two steps mentioned above.

4. Son to Father

The child component passes the value to the parent through a method. The parent and child define a method respectively, and then use an intermediate method to connect. Just remember the use of this intermediate method. There are quite a lot of steps to break down in detail.

1. Use a click event in the button of the subcomponent template

<button @click="sonclick">Button</button>

2. Define the method used above in the subcomponent, trigger an intermediate method and pass data

		sonclick(){
			this.$emit("sonemit",this.sonmsg)
		}

3. When the parent uses the child component, use the intermediate method to bind its own method

<myson @sonemit="parentclick"></myson>

4. Receive data in the parent method, where p can be written as any character

        parentclick(p){
			vm.parentmsg=p;
		}

Detailed code diagram

Operation effect

5. Slots

1. Add slots. A slot is a space in a component where you can insert anything when using the component.

Define somewhere in the subcomponent: <slot></slot>

When using the component, you can add any label at this location

2. When adding multiple slots, name each slot and put each slot in a template when using it.

Defining multiple slots

	template:`
	<div>
		<p>Subcomponent content: {{sonmsg}}</p>
		<p>Dividing line 111111111111111</p>
		<slot name="a1"></slot>
		<p>Separator line 2222222</p>
		<slot name="a2"></slot>
		<p>Dividing line 333333333</p>
	</div>
	`,

Use multiple slots, one template for one slot

                <template slot="a1">
					<button>Button a1</button>
				</template>
				<template slot="a2">
					<button>Button a2</button>
				</template>

6. Subcomponents pass values ​​to slots

1. Define the intermediate data emitmsg in the subcomponent template. The name can be anything.

<slot name="a1" :emitmsg="sonmsg"></slot>

2. Use res to receive in the parent component. No matter how many child components there are, res is used to receive. res is the result set. If there are multiple slots, the data will be in it.

				<template slot="a1" slot-scope="res">
					{{res.emitmsg}}
				</template>

Code Showcase

Display effect:

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of the use of router-view components in Vue
  • Detailed explanation of how to use Teleport, a built-in component of Vue3
  • A brief discussion on VUE uni-app custom components
  • A brief introduction to VUE uni-app basic components
  • Detailed explanation of Vue development Sort component code

<<:  CSS sets the list style and creates the navigation menu implementation code

>>:  Detailed explanation of MySQL backup and recovery practice of mysqlbackup

Recommend

MySQL Series 7 MySQL Storage Engine

1. MyISAM storage engine shortcoming: No support ...

js canvas realizes slider verification

This article example shares the specific code of ...

Parsing the commonly used v-instructions in vue.js

Table of contents Explanation of v-text on if for...

Detailed explanation of the production principle of jQuery breathing carousel

This article shares the specific process of the j...

Web page CSS priority is explained in detail for you

Before talking about CSS priority, we need to und...

js to realize the mouse following game

This article shares the specific code of js to im...

OpenSSL implements two-way authentication tutorial (with server and client code)

1. Background 1.1 Problems A recent product testi...

Docker Data Storage Volumes Detailed Explanation

By default, the reading and writing of container ...

Example of how to upload a Docker image to a private repository

The image can be easily pushed directly to the Do...

A brief discussion of 3 new features worth noting in TypeScript 3.7

Table of contents Preface Optional Chaining Nulli...

Nginx installation error solution

1. Unzip nginx-1.8.1.tar.gz 2. Unzip fastdfs-ngin...

Learn the principles and common operations of MySQL partition tables through examples

1. Meaning of partition table A partition table d...

Vue3.0 implements encapsulation of checkbox components

This article example shares the specific code of ...

Example code of Vue3 encapsulated magnifying glass component

Table of contents Component Infrastructure Purpos...

Example code for implementing dynamic column filtering in vue+element table

Requirement: When displaying data in a list, ther...