自定义指令

Question

该 自定义指令的文档 演示了如何将动态参数和值放在一起使用。

指令参数可以是动态的。例如，在 v-mydirective:[argument]="value"在我们的组件实例中，参数可以根据数据属性进行更新！这使得我们的自定义指令可以在整个应用程序中灵活使用。这使得我们的自定义指令可以在整个应用程序中灵活使用。

如果 "value" 不包含空格，它可以正常工作。但是在值中添加一个空格（例如 v-mydirective:[argument]="some value")会导致Nuxt窒息。

invalid expression: Unexpected identifier in

    some value

  Raw expression: v-mydirective:[argument]="some value"

问题出在哪里，我如何解决这个问题，使我能够使用一个带空格的字符串作为自定义指令的值？

Answer 1

问题。

发生这种情况是因为当我们传递 value 带空格的表达式，由vuejs进行评估，并试图找到该表达式的 data 带属性选项 some & value. 但由于这些属性名都不存在，因此我们得到了上述错误。

一个简单的例子来解释这个问题，当我们通过 value 作为。

v-mydirective:[argument]="2"

如果我们这样做 console.log 里面 bind 功能。

console.log(binding.value)

你会看到输出显示为 2. 但是，如果我们通过 value 作为。

v-mydirective:[argument]="2 + 2"

如果我们这样做 console.log 里面 bind 函数，有趣的是这次显示的输出是 4 而不是 2 + 2

---

解决办法。

有两种可能的解决方案。

解决方案#1:

你可以简单地包裹 some value 用单引号表示，然后像字符串一样传递。

v-mydirective:[argument]="'some value'"

这样表达式就会直接以字符串的形式表达出来。

演示。

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    console.log(binding.value)
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left',
    }
  }
})

#dynamicexample {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #304455;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dynamicexample">
  <p v-pin:[direction]="'some value'">I am pinned onto the page at 200px to the left.</p>
</div>

解决方案#2:

你也可以创建一个单独的 data 选项，比如

data: function () {
  return {
    myValue: 'some value'
  }
}

然后你可以在指令中使用它，比如：

v-mydirective:[argument]="myValue"

Demo:

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    console.log(binding.value)
  }
})

new Vue({
  el: '#dynamicexample',
  data: function () {
    return {
      direction: 'left',
      myValue: 'some value'
    }
  }
})

#dynamicexample {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: #304455;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="dynamicexample">
  <p v-pin:[direction]="myValue">I am pinned onto the page at 200px to the left.</p>
</div>