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

Analysis of the principle and usage of MySQL custom functions

This article uses examples to illustrate the prin...

Solution to the problem "/bin/sh: pip: command not found" during Dockerfile build

The content of the written Dockerfile is: FROM py...

Testing of hyperlink opening target

The target attribute of a link determines where th...

JavaScript implements displaying a drop-down box when the mouse passes over it

This article shares the specific code of JavaScri...

Docker case analysis: Building a Redis service

Table of contents 1 Create mount directories and ...

Detailed example of jQuery's chain programming style

The implementation principle of chain programming...

Several commonly used single-page application website sharing

CSS3Please Take a look at this website yourself, ...

Vue+js realizes video fade-in and fade-out effect

Vue+js realizes the fade in and fade out of the v...

View the port number occupied by the process in Linux

For Linux system administrators, it is crucial to...

Mysql delete data and data table method example

It is very easy to delete data and tables in MySQ...

Detailed explanation of the whole process and steps of installing clion on Ubuntu16.04

Explain the whole process of CLion from scratch. ...

css3 animation ball rolling js control animation pause

CSS3 can create animations, which can replace man...

Modify the style of HTML body in JS

Table of contents 1. Original Definition 2. JS op...

Summary of MySQL Undo Log and Redo Log

Table of contents Undo Log Undo Log Generation an...

Detailed explanation of the difference between IE8 compatibility view (IE7 mode) and standalone IE7

one. Overview of IE8 Compatibility View <br /&...