动态指令参数

本节目标：理解“动态指令参数”的核心思路，并能把它用于实际开发或面试表达。指令的参数可以是动态的。例如，在 v-mydirective:[argument]="value" 中，argument 参数可以根据组件实例数据进行更新！这使得自定义指令可以在应用中被灵活使用。

例如你想要创建一个自定义指令，用来通过固定布局将元素固定在页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素值的自定义指令：

<div id="baseexample">
  <p>Scroll down the page</p>
  <p v-pin="200">Stick me 200px from the top of the page</p>
</div>
Vue.directive("pin", {
  bind: function (el, binding, vnode) {
    el.style.position = "fixed";
    el.style.top = binding.value + "px";
  },
});
new Vue({
  el: "#baseexample",
});

这会把该元素固定在距离页面顶部 200 像素的位置。但如果场景是我们需要把元素固定在左侧而不是顶部又该怎么办呢？这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive("pin", {
  bind: function (el, binding, vnode) {
    el.style.position = "fixed";
    var s = binding.arg == "left" ? "left" : "top";
    el.style[s] = binding.value + "px";
  },
});
new Vue({
  el: "#dynamicexample",
  data: function () {
    return {
      direction: "left",
    };
  },
});

结果：这样这个自定义指令现在的灵活性就足以支持一些不同的用例了。 > 来自

 <https://cn.vuejs.org/v2/guide/custom-directive.html>

动态指令参数 ​

动态指令参数