vue2 自定义指令中怎么改变data中的值？

Question

在一个组件中，自定义指令，我想在自定义指令改变这个组件data中的某个值，如何改变？

        created(){
            this.index = 0;
            
        },
        directives :{
            progress:{
                inserted:function(el , binding){
                      //怎么改变index的值
                    }
                },
        }

Answer 1

今天想了下，貌似解决了。

<template>
  <div v-progress="{this.SET:SET}"></div>
</template>
<script>
 methods:{
  ...mapMutations(['SET'])
 }，
directives：{
  inserted:function(el , binding){
  //通过这个SET方法，传个参数，去改变值
    binding.value.SET(1);
  }
}
</script>

Answer 2

methods中定义一个方法，用于改变data中的属性：

methods: {
changeData () {
        this.pIndex++;
    }
}

然后把这个方法传递到自定义指令内部直接执行，data中的pIndex的值就可以改变了。

// 自定义指令传值
<div v-dir="{changeData}"></div>

//自定义指令内部
directives: {
    dir:{
        inserted(el,binding) {
            binding.value.changeData();
        }
        
    }
}

这样还有个问题：自定义指令中是无法跟踪到这个变化的，也就是通过this.pIndex你会发现，值根本没有变化。
解决方法：可以通过元素的自定义属性data-*：把data中的数据绑定到data-*上面，然后在自定义指令中通过el.dataset.*获取即可

Answer 3

set方法报错，请问具体怎么改变呢？

Answer 4

可通过vnode修改。
vnode.context.index = index;
https://github.com/vuejs/vue/...