Vue指令反应性值

Question

我使用自定义的v指令“v-剪辑”，它需要一个值。在我的例子中，我想使用‘数据绑定’。这意味着v剪辑的值可以从网站上的其他交互中动态变化。

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

我是否可以使用vnode或其他什么方法来检索值。我可以想象这个指令会有人得到更新的值。

剪辑指令

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

它是这样使用的，在ui中单击按钮时，变量counter被动态更改。

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

Answer 1

来自Vue.js 2指南

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

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

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)
    }

})