在 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 元素修改，而不是在其他地方到达和改变 Vue 状态。我团队的需求非常棘手。
不要在家里复制它，而是使用常规道具。

---

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

page.vue

SimpleDiv.vue