Passer des données aux composants à l'aide de directives personnalisées dans Vue3 : un guide

Question

Je souhaite mettre en œuvre ce comportement

<simple-component v-layer="'pizza'" />

Pour utiliser une directive personnalisée, utilisez-la dans 'pizza' 传递给组件，并能够在我的 SimpleComponent.

L'idée est ensuite de le mettre dans le scope parent supérieur (via v-slot ), c'est de la vieille école et probablement pas la meilleure façon de le faire, mais la syntaxe est importante pour mes clients (moins il y a de caractères saisis ici, mieux c'est).

J'ai trouvé ce problème github pour Vue2 mais je ne sais pas comment le faire fonctionner pour Vue3 ni même la syntaxe (je sais que ce n'est pas le cas vNode.context 而是 binding.instance 现在，而且我们不需要 $set puisque Vue3 utilise des proxys).

La documentation ne m'a pas vraiment aidé, et l'inspection des exemples dans les outils de développement classiques ne m'a donné aucun indice.

PS : Nous pouvons faire presque tout à l'intérieur de SimpleComponent lui-même, nous n'avons tout simplement pas besoin de le voir de l'extérieur du composant.

Answer 1

Avertissement

C'est assez hacky, et probablement pas la bonne façon de le faire, car cela va à l'encontre de l'API Vue (qui indique clairement qu'elle est en lecture seule), alors oui : vous ne voulez probablement pas utiliser c'est comme ça.

De plus, les directives sont utilisées pour modifier les éléments DOM, plutôt que d'atteindre et de modifier l'état de Vue ailleurs. Les besoins de mon équipe sont très difficiles.
Ne le reproduisez pas à la maison, utilisez plutôt des accessoires ordinaires.

---

En attendant, si c’est le cas, voici ce qu’il faut faire.

page.vue

sssccc

SimpleDiv.vue

sssccc