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

How to build a standardized vmware image for kubernetes under rancher

When learning kubernetes, we need to practice in ...

Docker container from entry to obsession (recommended)

1. What is Docker? Everyone knows about virtual m...

Linux sar command usage and code example analysis

1. CPU utilization sar -p (view all day) sar -u 1...

Detailed explanation of JavaScript's Set data structure

Table of contents 1. What is Set 2. Set Construct...

Webpack file packaging error exception

Before webpack packaging, we must ensure that the...

jQuery implements all shopping cart functions

Table of contents 1. Select All 2. Increase or de...

Implementation of vertical centering with unknown height in CSS

This article mainly introduces the implementation...

A brief discussion on the design and optimization of MySQL tree structure tables

Preface In many management and office systems, tr...

Example code for css3 to achieve scroll bar beautification effect

The specific code is as follows: /*Scroll bar wid...

Learn about TypeScript data types in one article

Table of contents Basic Types any type Arrays Tup...

Native JS to achieve directory scrolling effects

Here is a text scrolling effect implemented with ...

Web Design Tutorial (5): Web Visual Design

<br />Previous article: Web Design Tutorial ...

MySQL 5.7.18 download and installation process detailed instructions

MySql Download 1. Open the official website and f...

Web interview: The difference between MVC and MVVM and why Vue does not fully comply with MVVM

Table of contents Difference between MVC and MVVM...

JavaScript function encapsulates random color verification code (complete code)

An n-digit verification code consisting of number...