Vue 指令反应性值答案

【问题标题】：Vue Directive Reactivity valueVue 指令反应性值
【发布时间】：2022-01-13 15:09:43
【问题描述】：

我正在使用自定义 v 指令“v-clip”，它需要一个值。就我而言，我想使用“数据绑定”。这意味着 v-clip 的值可以根据网站上的其他交互动态更改。

在这种情况下，我实现了一个简单的示例，每次用户单击一个名为“计数器”的按钮时，它的值都会增加 1。当用户单击自定义指令时，如何检索最新的值打印到控制台。

有没有办法我可以使用 vnode 或其他东西来检索值。我想该指令将能够让某人获得更新的值。

剪辑指令

Vue.directive('clip', {
      bind: (el, binding, vnode) => {
        const clickEventHandler = (event) => {
          console.log(binding.value)
        }
        el.addEventListener('click', clickEventHandler)
      },
    })

在用户界面中单击按钮时，变量counter 会动态更改。

<div v-clip="counter">Clip A {{ counter }}</div>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

来自Vue.js 2 guide：

如果您需要跨钩子共享信息，建议通过元素的数据集进行。

所以，如果我理解正确你的问题，你可以尝试以下方式：


Vue.directive('clip', {

    bind: (el, binding) => {

        const clickEventHandler = () => {
            console.log(el.getAttribute('data-clipvalue'))
        }

        el.addEventListener('click', clickEventHandler)
        el.setAttribute('data-clipvalue',binding.value)
        
    },

    update: (el,binding) => {
        el.setAttribute('data-clipvalue',binding.value)
    }

})

【讨论】：