Übergeben von Daten an Komponenten mithilfe benutzerdefinierter Anweisungen in Vue3: Eine Anleitung

Question

Ich möchte dieses Verhalten umsetzen

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

Um eine benutzerdefinierte Direktive zu verwenden, verwenden Sie sie in 'pizza' 传递给组件，并能够在我的 SimpleComponent.

Die Idee ist, es dann in den oberen übergeordneten Bereich einzufügen (über v-slot). Das ist altmodisch und wahrscheinlich nicht die beste Vorgehensweise, aber die Syntax ist für meine Kunden wichtig (je weniger Zeichen hier eingegeben werden, desto besser).

Ich habe dieses Github-Problem für Vue2 gefunden, bin mir aber nicht sicher, wie ich es für Vue3 oder gar die Syntax zum Laufen bringen soll (ich weiß, dass das nicht der Fall ist vNode.context 而是 binding.instance 现在，而且我们不需要 $set, da Vue3 Proxys verwendet).

Die Dokumentation hat mir nicht wirklich weitergeholfen und die Überprüfung der Beispiele in regulären Entwicklungstools hat mir keine Hinweise gegeben.

PS: Wir können fast alles in SimpleComponent selbst tun, wir müssen es nur nicht von außerhalb der Komponente sehen.

Answer 1

免责声明

这是很hacky的，而且可能不是正确的方法，因为它违背了Vue API（这清楚地表明它是只读），所以是的：您可能不想那样使用它。

此外，指令用于 DOM 元素修改，而不是在其他地方到达和改变 Vue 状态。我团队的需求非常棘手。
不要在家里复制它，而是使用常规道具。

---

同时，如果您这样做，请按以下方法操作。

page.vue

SimpleDiv.vue