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

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','学习')}

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	}}

(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	}}

(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	}}

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);}

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>

Receive in the child component

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

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.

If used If props are received, they will appear on the vm but there is no

props:['msg','name']

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>

Trigger the event in the child component and pass the value

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

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

<demo>
	<template>
		<span>你好</span>
	</template></demo>

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!