Explication détaillée de la fonction SetupContext dans Vue3 : maîtriser l'utilisation de l'API du composant Vue3

Avec la sortie officielle de Vue3, les développeurs de Vue.js peuvent commencer à développer en utilisant ses nouvelles fonctionnalités et méthodes API. Parmi elles, la fonction SetupContext est une méthode API importante dans Vue3, fournissant de nombreuses fonctions pratiques afin que nous puissions mieux écrire les composants Vue3. Dans cet article, je présenterai en détail l'utilisation de la fonction SetupContext.

1. Qu'est-ce que la fonction SetupContext ?

La fonction SetupContext est une méthode API fournie dans Vue3. Elle est appelée dans la fonction setup() du composant. Cette fonction renvoie un objet contenant les propriétés suivantes :

props : paramètres de props reçus par le composant ;
attrs : tous les attributs non définis du composant
slots : slots du composant ; 🎜🎜#emit : Événement personnalisé du composant.
Nous pouvons obtenir des informations telles que les accessoires, les emplacements et les événements personnalisés transmis dans le composant en introduisant la fonction SetupContext et en l'utilisant dans la fonction setup().

2. Attributs des props

Dans Vue3, nous n'avons plus besoin de déclarer les paramètres des props qui doivent être utilisés dans la configuration détaillée du composant. Au lieu de cela, dans la fonction setup() du composant, obtenez les paramètres d'accessoires entrants en utilisant l'attribut props.

De cette façon, nous n'avons plus besoin d'utiliser this.$props pour obtenir les paramètres de props transmis comme dans Vue2. Par exemple :

// Obtenir les paramètres des accessoires dans Vue2

props : ['message'],
Mounted() {
console.log(this.$props . message)
}

// Récupère les paramètres des accessoires à partir des attributs des accessoires dans Vue3

setup(props) {
console.log(props.message)#🎜🎜 # }
Dans Vue3, obtenir les paramètres des accessoires devient très simple. Dans la fonction setup() du composant, les paramètres props reçus sont directement accessibles en utilisant l'attribut props.

Si le paramètre props d'un composant est un objet et que toutes ses propriétés doivent être utilisées dans la fonction setup(). L'affectation peut être effectuée en utilisant une syntaxe de déstructuration. Par exemple :

setup({ message, author }) {

console.log(message, author)

}

Dans cet exemple, nous utilisons la syntaxe de déstructuration d'objet pour attribuer des valeurs aux attributs du message et de l'auteur dans les accessoires Donnez le message et l'auteur des variables.

Il convient de noter que le paramètre props dans Vue3 est devenu une propriété en lecture seule et ne prend pas en charge la liaison bidirectionnelle. Si nous devons modifier les paramètres des accessoires, nous devons envoyer des messages au composant parent via la méthode submit().

3. Attribut Attrs

En plus de l'attribut props, l'objet SetupContext contient également l'attribut attrs. Cette propriété contient toutes les propriétés non définies du composant. Par exemple :

// Notre composant est défini comme suit :

props: {
message: String
},
setup(props, {attrs}) {# 🎜🎜 #

console.log(attrs.color) // 'red'

}

// Lors de l'utilisation du composant, un attribut de couleur est transmis

c9f3be60d869ecdba749daa35b1c2aff

Dans cet exemple, nous définissons un composant d'exemple et transmettons une propriété de couleur non définie. Lors de l'utilisation de la fonction SetupContext, nous pouvons obtenir cet attribut non défini via l'attribut attrs.

Il convient de noter que l'attribut attrs dans Vue3 est également un attribut en lecture seule et ne prend pas en charge la liaison bidirectionnelle.

4. L'attribut slots

Vue3 fournit également des attributs de slots, qui sont exactement les mêmes que dans Vue2. Nous pouvons utiliser l'attribut slots pour accéder aux slots passés dans le composant. Par exemple :

// Notre composant est défini comme suit

d477f9ce7bf77f53fbcf36bec1b69b7a

dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<slot></slot>

16b28748ea4df4d9c2150843fecfba68# 🎜🎜 #21c97d3a051048b8e55e3c8f199a54b2

setup(props, { slots }) {

console.log(slots.default())
}

#🎜 🎜# // Lors de l'utilisation du composant, deux lignes de texte sont insérées

663603caa420dd21dd2d2832ad3064aa
e388a4556c0f65e1904146cc1a846beeLa première ligne de texte0cba36f12cf561cef14ffa62bcdafa2c# 🎜🎜# e388a4556c0f65e1904146cc1a846beeLa deuxième ligne de texte94b3e26ee717c64999d7867364b1b4a3
9711b247f42f43ca3168f4ff0acf0adf

Dans cet exemple, nous définissons un composant d'exemple et l'insérons dedans . Deux lignes de texte sont insérées dans la fente. Dans la fonction setup(), nous utilisons l'attribut slots pour accéder à ces deux lignes de texte.

Il est à noter que les slots dans Vue3 sont divisés en slots par défaut et en slots nommés. Par conséquent, lors de l'obtention d'emplacements nommés, vous devez les obtenir via slots[name]().

5. Méthode Emit

Exactement la même que dans Vue2, la méthode Emit fournit la fonction du composant transmettant des messages au composant parent. Dans Vue3, la méthode submit peut également être appelée dans la fonction setup() et accessible via l'objet renvoyé dans la fonction setup(). Par exemple :

// Le composant parent est défini comme suit

6079e4c22334abd451f8cc97d95742d8#🎜 🎜#

// Le sous-composant est défini comme suit

setup(_, {émetteur }) {

function handleClick() {
  emit('example-event', 'example data')
}
return {
  handleClick
}

}

Dans cet exemple, nous définissez une méthode handleClick, utilisée pour transmettre l'exemple d'événement-événement et les données d'exemple de données qui l'accompagnent au composant parent.

Il est à noter que la méthode submit() dans Vue3 est devenue une méthode en lecture seule, et nous ne pouvons pas modifier son comportement.

6. Conclusion

Dans cet article, nous avons discuté en détail de la fonction SetupContext dans Vue3 ainsi que des propriétés et méthodes qu'elle contient. La maîtrise de ces fonctionnalités et méthodes API de Vue.js 3 nous permet d'écrire les composants Vue3 de manière plus flexible et de mieux s'adapter aux différents scénarios commerciaux.

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!