vue的指令，以及指令的钩子函数之间传值

钩子函数：

• bind：只调用一次，在指令第一次绑定到dom元素时调用；这时父节点为 null
• inserted：在被绑定该指令的元素插入到父节点时调用；这时父节点存在
• update：指令所在组件的VNode更新时调用（此钩子函数可能发生在子VNode更新之前）；组件dom更新前调用
• componentUpdated：指令所在的VNode和子VNode全部更新后调用；组件dom更新后调用
• unbind：只调用一次，指令与元素解绑时调用

钩子函数的参数：

• el：指令所绑定的元素，可直接用来操作dom
• binding：一个对象，包含以下属性
  • name：指令名，如指令“v-name”，则binding.name的值为name
  • value：指令的绑定值，如：v-name=“1+1”，则绑定值为 2
  • oldValue：指令绑定的前一个值，仅在update和componentUpdate钩子中可用
  • expression：字符串形式的指令表达式，如：如：v-name=“1+1”，指令表达式为“1+1”
  • arg：传给指令的参数，如：v-name:test="1+1"，则参数为“test”；也可使用动态参数，如：v-name:[argument]="1+1"，即可在组件中的data对象中定义 argument 的值
  • modifiers：一个包含修饰符的对象，如：v-name:test.a.b="1+1"，则modifiers为
• vnode：vue编译生成的虚拟节点
• oldVnode：上一个虚拟节点，仅在update和componentUpdate钩子中可用

注册方式：

• 全局注册：

  // 注册 全局指令 v-name
  Vue.directive("name", {
      // 当被绑定这个指令的元素插入到dom中时，执行inserted钩子函数
      inserted: function(el) {
          // 逻辑处理
      }
  })
  

• 局部注册：

  // 注册 局部指令 v-name
  export default {
      name: "ComponentName",
      directives: {
          name: {
              // 当被绑定这个指令的元素插入到 本组件 的dom中时，执行inserted钩子函数
              inserted: function(el) {
  				// 逻辑处理
              }
          }
      }
  }
  

• 如果希望在 bind 和 update 时触发相同的行为，则可以这样定义指令：

  Vue.directive("name", function (el, binding) {
    // 逻辑处理
  })
  

指令的钩子函数之间传值----使用 dataset 的方式

具体方式：

<!-- 使用指令的组件 -->
<Test
   v-directionsTest
   :data-test="testValue"
></Test>

export default {
	data: {
		return {
			testValue: "test"
		}
	}
}

// 指令定义
Vue.directions("directionsTest", {
    // 指令第一次绑定到dom元素时调用
    bind: function(el) {
        // 修改组件中的 testValue 的值
        el.dataset.test = "update test"
	}
})