A brief discussion on VUE uni-app custom components

A brief discussion on VUE uni-app custom components

1. Parent components can pass data to child components through props

2. The child component can pass data to the parent component through custom events, the parent component customizes the event, the child component triggers the parent component event, and passes the data

3. Subcomponents can define slots to allow parent components to customize the content to be displayed

4. Use easycom specifications to directly use components

page/news/news.vue

<template>
	<view>
		<view>Custom component usage specifications</view>
		<card color="red" @fclick="fclick"></card>
		<card color="yellow">Yellow component</card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			fclick(msg){
				console.log('The parent component receives the value passed by the child component: '+msg);
			}
		}
	}
</script>

<style>

</style>

Component: components/card/card.vue

<template>
	<view :style="{background:color}" @click="zclick">
		Custom component <slot></slot>
	</view>
</template>

<script>
	export default {
		name:"card",
		props:{
			color:{
				type:String,
				default:'white'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			zclick(){
				console.log('Clicked the subcomponent');
				this.$emit('fclick','The click event is passed to the parent component');
			}
		}
	}
</script>

<style>

</style>

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 introduction to VUE uni-app basic components
  • Detailed explanation of Vue development Sort component code
  • A detailed discussion of components in Vue

<<:  Implementation of nacos1.3.0 built with docker

>>:  Detailed tutorial for installing MySQL 8.0.22 on Redhat 7.3 (binary installation)

Recommend

Detailed analysis of replication in Mysql

1.MySQL replication concept It means transferring...

Detailed explanation of basic interaction of javascript

Table of contents 1. How to obtain elements Get i...

Example of Vue uploading files using formData format type

In Vue, we generally have front-end and back-end ...

MYSQL METADATA LOCK (MDL LOCK) theory and lock type test

Table of contents MYSQL METADATA LOCK (MDL LOCK) ...

Nginx reverse proxy learning example tutorial

Table of contents 1. Reverse proxy preparation 1....

Solve the problem when setting the date to 0000-00-00 00:00:00 in MySQL 8.0.13

I just started learning database operations. Toda...

HTML table tag tutorial (25): vertical alignment attribute VALIGN

In the vertical direction, you can set the row al...

How to import and export Cookies and Favorites in FireFox

FireFox is a commonly used browser with many exte...

Deep understanding of line-height and vertical-align

Several concepts Line box: A box that wraps an in...

Regarding the Chinese garbled characters in a href parameter transfer

When href is needed to pass parameters, and the p...

Conditional comment style writing method and sample code

As front-end engineers, IE must be familiar to us...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

How to view the running time of MySQL statements through Query Profiler

The previous article introduced two methods to ch...

Use of docker system command set

Table of contents docker system df docker system ...