当我尝试开发 Layer 组件时发生了一些事情。代码如下：
// Wrapper.vue
// Test.vue
// Résultats au format HTML :
Comme le montre le code ci-dessus, le composant Wrapper est un composant vide. Son but est de définir le z-index des HTMLElements dans slot["default"].
Malheureusement, je ne trouve pas l'élément enfant dans useSlots()["default"]. J'ai donc essayé de demander à un observateur de mutation d'observer la liste des enfants du parent.
Il fonctionne très bien tout seul (comme l'image 1 et l'image 2 dans l'exemple). Mais lorsque plusieurs Wrapper sont enveloppés ensemble, ils se recouvrent les uns les autres (Comme l'image 3 dans l'exemple, l'index z de l'image3 défini par wrapper3 est écrasé par wrapper1). Cela signifie qu'ils partagent le même parent, de sorte que les enfants du parent sont toujours les mêmes.
Alors maintenant, la question redevient "Comment obtenir des éléments HTML dans l'emplacement"... un gourou de vuejs peut-il m'aider ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cela peut être fait plus simplement en utilisant les fonctions de rendu de Vue :Emplacements de rendu
const { createApp, h } = Vue; const Wrapper = { props: { name: { type: String, default: "" }, zIndex: { type: Number, default: 0 }, }, setup(props, { slots }) { let children = slots.default(); if (children) { for (let i = 0; i < children.length; i++) { children[i].props.style = `z-index: ${props.zIndex}`; } } return () => slots.default() } } const App = { components: { Wrapper } } const app = createApp(App) const vm = app.mount('#app')#app { line-height: 2; } [v-cloak] { display: none; }