Home > Web Front-end > Vue.js > Let's talk about the return value of the setup function in vue3

Let's talk about the return value of the setup function in vue3

藏色散人
Release: 2022-08-09 10:26:14
forward
6238 people have browsed it

1. Concept:

setup is a new configuration item in vue3 , the value is a function, the data, methods, etc. we use in the component must be configured in the setup. [Related recommendations: vue.js video tutorial]

2. Detailed explanation:

There are two return values ​​​​of the setup function
1. Return one Rendering function, you can customize the rendering content (not used much, just understand it)

import {h} from 'vue'...setup() {
    ...
    return () => h('h1','学习')}
Copy after login

2. Return a object, the properties and methods in the object can be found in the template Use
directly (1) The properties and methods in the vue3 configuration can be read in the vue2 configuration

methods: {
	test1() {
		console.log(this.sex);
		console.log(this.sayHello);
	}},setup() {
	const sex = ref('女')
	function sayHello() {
		alert('你好啊')
	}
	return {
		sex,
		sayHello	}}
Copy after login

Lets talk about the return value of the setup function in vue3
(2) The vue2 configuration cannot be read in the vue3 configuration Properties and methods in

data() {
	return {
		sex:'男'
	}},methods: {
	sayHello() {
		alert('你好啊')
	}},setup() {
	function test2() {
		console.log(this.sex);
		console.log(this.sayHello);
	}
	return {
		test2	}}
Copy after login

Lets talk about the return value of the setup function in vue3
(3) If there is a conflict between the configurations of vue2 and vue3, the setup of vue3 takes precedence

data() {
	return {
		sex:'男'
	}},setup() {
	const sex = ref('女')
	return {
		sex	}}
Copy after login

Lets talk about the return value of the setup function in vue3

Note:
(1) Try not to mix the configurations of vue2 and vue3
(2) setup cannot be an async function, because the return value is no longer the return object. But for promises, the template cannot see the properties in the return object. (You can also return a Promise instance later, but it requires the cooperation of Suspense and asynchronous components)

3. Two points to note

1. The timing of setup execution

In beforeCreate Executed once before, this was undefined.

beforeCreate(){
	console.log('beforeCreate');},setup(){
	console.log('setup',this);}
Copy after login

Lets talk about the return value of the setup function in vue3

2. Setup parameters

1. Props: The value is an object, including: passed from outside the component, and the component Internally declares the received properties.
Pass data to the child component in the parent component

<demo></demo>
Copy after login
Copy after login

Receive in the child component

props:['msg','name'], // 需要声明一下接受到了,否则会报警告setup(props){
	console.log(props)}
Copy after login

Lets talk about the return value of the setup function in vue3
and the received data is packaged into a proxy object, which can Implement responsiveness.

2, context: Context object
1, attrs: The value is an object, including: passed from outside the component, but not declared in the props configuration Attribute, equivalent to this.$attrs.

During the communication process between parent and child components, the parent component passes the data. If the child component does not use props to receive it, it will appear in attrs, but there is no such thing in vm.
Lets talk about the return value of the setup function in vue3
If used If props are received, they will appear on the vm but there is no

props:['msg','name']
Copy after login

Lets talk about the return value of the setup function in vue3
2 in attrs. emit: A function that distributes custom events, equivalent to this .$emit.
Bind an event to the child component in the parent component

<demo></demo>
Copy after login
Copy after login

Trigger the event in the child component and pass the value

emits:['hello'], // 要声明接收到了hello事件,否则会报警告context.emit('hello',666)
Copy after login

3. slots: Receive The content of the slot is equivalent to this.$slots.

<demo>
	<template>
		<span>你好</span>
	</template></demo>
Copy after login

The masked slot in vue3 uses v-slot:

The above is the detailed content of Let's talk about the return value of the setup function in vue3. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template