Parlons de la valeur de retour de la fonction setup dans vue3

1. Concept :

setup est un nouvel élément de configuration dans vue3, la valeur est une fonction, les données, méthodes, etc. que nous utilisons dans le composant, Tous doit être configuré dans le setup. [Recommandations associées : tutoriel vidéo vue.js] setup是vue3中的一个新的配置项，值为一个函数，我们在组件中用到的数据、方法等等，都要配置在setup中。【相关推荐：vue.js视频教程】

二、详解：

setup函数的返回值有两种
1、返回一个渲染函数，可以自定义渲染内容(用得不多，了解即可)

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

2、返回一个对象，对象中的属性和方法在模板中可以直接使用
（1）在vue2的配置中可读取到vue3配置中的属性和方法

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

（2）在vue3的配置中不能读取vue2配置中的属性和方法

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

（3）如果vue2和vue3的配置有冲突，则vue3的setup优先

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

注意点：
（1）vue2和vue3的配置尽量不要混用
（2）setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

三、两个注意点

1、setup执行的时机

在beforeCreate之前执行一次，this是undefined。

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

2、setup的参数

1、props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
在父组件中给子组件传递数据

<demo></demo>

在子组件中接收

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

并且接收到的数据被包装成一个代理对象，能够实现响应式。

2、context：上下文对象
1、attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。

父子组件通信过程中，父组件把数据传递过来，如果子组件没有用props进行接收，就会出现在attrs中，而vm中没有

如果用props接收了，则会出现在vm上而attrs中没有

props:['msg','name']

2、emit: 分发自定义事件的函数, 相当于 this.$emit。
在父组件中给子组件绑定一个事件

<demo></demo>

在子组件中触发事件并且可以传值过去

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

3、slots: 收到的插槽内容, 相当于 this.$slots

2. Explication détaillée :

La fonction de configuration a deux valeurs de retour
1. Renvoie une fonction de rendu, qui peut personnaliser le contenu du rendu (pas beaucoup utilisé, comprenez-le simplement) 🎜

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

🎜2. strong>Object, les propriétés et méthodes de l'objet peuvent être utilisées directement dans le modèle
(1) Les propriétés et méthodes de la configuration vue3 peuvent être lues dans la configuration vue2🎜rrreee🎜
(2) Dans la configuration de vue3 Impossible de lire les propriétés et les méthodes dans la configuration vue2🎜rrreee🎜
(3) S'il y a un conflit entre les configurations de vue2 et vue3, la configuration de vue3 aura la priorité🎜rrreee🎜
🎜🎜Remarques :
(1) Configurez vue2 et vue3 autant que possible Ne les mélangez pas
(2) la configuration ne peut pas être une fonction asynchrone, car la valeur de retour n'est plus l'objet de retour, mais une promesse, et le modèle ne peut pas voir les attributs dans l'objet de retour. (Vous pouvez également renvoyer une instance Promise plus tard, mais cela nécessite la coopération de Suspense et de composants asynchrones) 🎜🎜Trois, deux points à noter🎜

1 Le moment de l'exécution de la configuration

🎜Exécuter une fois avant de créer, ce n'est pas défini. 🎜rrreee🎜🎜

2 , paramètres de configuration

🎜1. props : La valeur est un objet, comprenant : les attributs passés de l'extérieur du composant et reçus par la déclaration interne du composant.
Transmettre les données au composant enfant dans le composant parent🎜rrreee🎜Recevoir dans le composant enfant🎜rrreee🎜
Et les données reçues sont regroupées dans un objet proxy, permettant la réactivité. 🎜🎜2. contexte : objet de contexte
1. attrs : La valeur est un objet, comprenant : les attributs passés de l'extérieur du composant mais non déclarés dans les accessoires. configuration , équivalent à this.$attrs. 🎜🎜Pendant le processus de communication entre les composants parent et enfant, le composant parent transmet les données si le composant enfant n'utilise pas d'accessoires pour les recevoir, elles apparaîtront dans les attrs, mais pas dans la vm

Si reçu avec les accessoires, il apparaîtra sur la machine virtuelle et dans l'attrs No 🎜rrreee🎜
2. submit : Une fonction qui distribue des événements personnalisés, équivalente à this.$emit.
Lier un événement au composant enfant dans le composant parent🎜rrreee🎜Déclencher l'événement dans le composant enfant et lui transmettre la valeur🎜rrreee🎜slots : Le contenu du slot reçu, Équivalent à this.$slots. 🎜rrreee🎜Utilisez v-slot pour l'emplacement masqué dans vue3 :🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!