vue 之 自定义指令

---

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。---来自官网

钩子函数参数

指令钩子函数会被传入以下参数：

• 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 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

一、基础示例(给指令传递参数)

<!-- 组件 -->
<template>
  <div v-myDirectives.parameter></div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  // 自定义指令
  directives: {
    myDirectives(el, bindings, vnode) {
     console.log(bindings)
    }
  },
  methods: {},
  mounted() {}
};
</script>

此时我们可以在控制台看到：modifiers中即为我们想要传递的参数。

二、升级操作(从指令中返回参数)

<!-- 组件 -->
<template>
  <div v-myDirectives:getmsg.parameter></div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  // 自定义指令
  directives: {
    myDirectives(el, bindings, vnode) {
      console.log('返回参数的函数为：'+bindings.arg);
      // 返回处理后的参数
      vnode.context[bindings.arg]('msg');
    }
  },
  methods: {
    getmsg(msg) {
      console.log("返回的参数为:" + msg);
    }
  },
  mounted() {}
};
</script>

此时我们可以在控制台看到：(承接返回参数的方法需在methods中注册)

生活不能等别人来安排，要自已去争取和奋斗；而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。