Vue自定义指令 数据传递

在项目开发过程中，难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 。关于directive的使用方式这里就不做过多的介绍了，Vue官方文档中说的还是听明白的。今天讲讲在使用Vue自定义指令过程中

1. 怎么数据传递到自定义指令中

2.怎么讲自定义指令中的数据传回到组件实例中

 

一、将数据传递到自定义指令中

<li class="table-columns" v-for="(tableHead,index) in getTableHeadList" :class="{'column-active':tableHeadIndex === index}" :key="index" :style="{width:tableHead.fieldWidth + 'px' }">

<div class="app-shrink-drag" v-dragWidth="index"></div>

</li>

这里只是传递了一个元素的索引进去，index 可以是其他类型的值 ，比如json对象 {index:1}

 

在指令中 通过binding.value 或者 binding.value.index 接收。

inserted(el, binding, vnode) {

 

 

二、讲自定义指令中的数据传递到组件实例中

 自定义指令可以接收三个参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。

    Vue 编译生成的虚拟节点包含当前组件实例对象（vnode.context），可以将自定义指令中修改过的数据，直接赋值实例中的对象属性 列如：

   vnode.context.arr[index].name = 'xxx'。

 

 

  目前只了解到可以这种方式 实现自定义指令和组件实例的相互传值，如果大神们还知道其他方式，欢迎留言。