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

HTML basic syntax is convenient for those who are just starting to learn HTML

1.1 General marking A general tag consists of an ...

Detailed explanation of the principle and usage of cursor (DECLARE) in MySQL stored procedure

This article uses examples to illustrate the prin...

Html to achieve dynamic display of color blocks report effect (example code)

Use HTML color blocks to dynamically display data...

Installing Windows Server 2008 operating system on a virtual machine

This article introduces the installation of Windo...

Detailed example of MySQL data storage process parameters

There are three types of MySQL stored procedure p...

Detailed explanation of Vue's simple store

The simplest application of store in Vue is globa...

MySQL 5.7.24 compressed package installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

MySQL 8.0.20 installation tutorial and detailed tutorial on installation issues

Original address: https://blog.csdn.net/m0_465798...

How to solve the front-end cross-domain problem using Nginx proxy

Preface Nginx (pronounced "engine X") i...

Problems encountered in the execution order of AND and OR in SQL statements

question I encountered a problem when writing dat...

Some notes on installing fastdfs image in docker

1. Prepare the Docker environment 2. Search for f...

Detailed steps to install MYSQL8.0 on CentOS7.6

1. Generally, mariadb is installed by default in ...

JavaScript Basics Series: Functions and Methods

Table of contents 1. The difference between funct...

Detailed explanation of the process of installing msf on Linux system

Or write down the installation process yourself! ...

Detailed steps for installing and configuring MySQL 8.0 on CentOS

Preface Here are the steps to install and configu...