在 Vue3 中使用自訂指令將資料傳遞到元件：指南

Question

我想實現這種行為

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

使用自訂指令，將 'pizza' 傳遞給元件，並能夠在我的 SimpleComponent 中使用它。

這個想法是隨後將其放在上層父範圍中（通過v-slot ），它很老套，可能不是最好的方法，但語法對我的客戶很重要（這裡輸入的字符越少越好）。

我發現了Vue2 的這個github 問題，但我不確定如何使其適用於Vue3 甚至語法（我知道它不是vNode.context 而是binding.instance 現在，而且我們不需要 $set 因為Vue3 使用代理）。

文件並沒有真正幫助我，並且在常規開發工具中檢查實例也沒有給我任何線索。

PS：我們可以在 SimpleComponent 本身中做幾乎任何事情，我們只是不需要從元件的外部看到它。

Answer 1

免責聲明

這是很hacky的，而且可能不是正確的方法，因為它違背了Vue API（這清楚地表明它是只讀），所以是的：您可能不想那樣使用它。

此外，指令用於 DOM 元素修改，而不是在其他地方到達和改變 Vu​​e 狀態。我團隊的需求非常棘手。
不要在家裡複製它，而是使用常規道具。

---

同時，如果您這樣做，請按以下方法操作。

page.vue

#

sssccc

SimpleDiv.vue

sssccc