如何通过 Vue3 中的自定义指令将数据传递给组件？答案

【问题标题】：How to pass data down to a component via custom directive in Vue3?如何通过 Vue3 中的自定义指令将数据传递给组件？
【发布时间】：2021-12-31 10:20:58
【问题描述】：

我想实现这种行为

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

使用自定义指令，将'pizza' 传递给组件并能够在我的SimpleComponent 中使用它。
这个想法是在之后（通过v-slot）在上层父范围中提出它，它很hacky，可能不是最好的方法，但语法对我的客户很重要（在这里输入的字符越少越好）。

我为 Vue2 找到了 this github issue，但我不确定如何使它适用于 Vue3 甚至语法（我知道现在不是 vNode.context 而是 binding.instance，而且我们不需要 @ 987654330@，因为 Vue3 正在使用代理）。

The documentation 并没有真正帮助我，并且在常规开发工具中检查实例并没有给我任何线索。

PS：SimpleComponent 本身几乎可以做任何事情，只是不需要从组件外部看到它。

【问题讨论】：

你想要的就是道具的用途。为什么要使用指令？指令用于低级 DOM 操作...
是的，我知道道具是这个的用例。正如我所写，在这里我正在寻找一个肮脏的hacky解决方案，但要写下的东西最少。我认为一个指令可以完美地“隐藏”一些东西并为最终用户自动执行。这既糟糕又丑陋，但最终目标是尽可能少地写下语法，尤其是如果可以提前猜到的话。所以，我认为自定义指令 + 全局 mixin 非常适合该用例！
对不起，我不知道 v-layer="'pizza'" 比 layer="pizza" 更好（或更短）的地方。无论如何，明确记录了除el 之外的所有指令挂钩参数都是只读 - docs。所以即使你找出了正确的语法，你也违反了 Vue 规则
问题是我可以添加更多而不仅仅是道具，我还看到警告说它是只读是的。正如我告诉过你的，我知道这是 hacky 并且违反了 Vue API。我的意思是，我完全同意你在这里的立场，我也同意。同时，我的客户无论如何都会这样做。我更喜欢自己找一个不那么丑的最好的。
你需要成为这里的程序员，反击客户。

标签： vue.js vuejs3

【解决方案1】：

免责声明

这是 hacky，可能不是要走的路，因为它违反了 Vue API（很明显它是 read only），所以是的：你可能不想那样使用它。

此外，指令用于 DOM 元素修改，而不是在其他地方达到和改变 Vue 状态。我的团队的需求非常糟糕。
不要在家里复制，用普通的道具代替。

同时，如果你这样做了，方法如下。

page.vue

<template>
  <simple-div v-layer="'pizza'">
</template>

<script>
export default {
  directives: {
    layer: {
      mounted(_el, binding, vnode) {
        vnode.ref.i.data.layer = binding.value
      },
    },
  },
}
</script>

SimpleDiv.vue

<template>
  <div ref="layerHack">  <!-- this ref is required -->
    <div>{{ layer }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      layer: null,
    }
  },
}
</script>

【讨论】：