具有相同自定义指令 vuejs 的多个元素

Posted 2023-02-16

【中文标题】具有相同自定义指令 vuejs 的多个元素

【英文标题】：Multiple Elements with same custom directive vuejs

【发布时间】：2019-03-14 18:00:44

【问题描述】：

嘿，我的页面中有一些具有相同自定义指令但值不同的元素，

所以我想使用该指令来处理所有元素。

当我使用此代码时：

Vue.directive('can', function (value) 
    console.log(value)
)

它只是给了我第一个带有 can 指令的元素，而不是所有元素，那么我如何才能获得带有 can 指令的所有元素？！

更新： 我的元素是这样的：

            <button v-can="'register-permission'">Register</button>
            <button v-can="'buy-permission'">Buy</button>
            <button v-can="'Sell-permission'">Sell</button>

我想在页面中使用 v-can 指令访问所有按钮！怎么可能？

【问题讨论】：

我认为您需要让指令保留元素注册表。

正如@RoyJ 指出的那样，做这样的事情：let cans = []; Vue.directive('can', inserted: function (el, binding) cans.push(el: el, value: binding.value) console.log(JSON.stringify(cans)) )

我知道这听起来很愚蠢而且没有多大意义。但是如果你在每个按钮上都加上一个独特的key 会发生什么？ - 也许 Vue 试图错误地重用你的按钮¯_(ツ)_/¯

@Sphinx 哦，还是给我第一个使用 can! 的元素吧！因为我想获得关于监听器的更新指令，像这样：Bus.$on('permissionChanged', function (data) let cans = [] Vue.directive('can', function (el, binding, vnode) cans.push(el) console.log(cans) ) )

【参考方案1】：

按照custom directive 上的 Vuejs 文档，我会像这样访问所有这些文档：

Vue.directive('can', 
  bind: function (el, binding, vnode) 
    console.log(binding.expression)
  
)