如何从 Vue.js 2 中的自定义指令中获取文字表达式？

Posted 2023-02-23

【中文标题】如何从 Vue.js 2 中的自定义指令中获取文字表达式？

【英文标题】：How do I get a literal expression from a custom directive in Vue.js 2?

【发布时间】：2017-10-08 13:12:51

【问题描述】：

我正在尝试将 Vue 1.x 自定义指令传输到 Vue 2.x，但我找不到任何地方如何将我的表达式再次作为文字获取。假设这个例子是我的自定义指令：

<div v-custom="file.txt"></div>

在 Vue1 中

Vue.directive('custom', function () 
  console.log(this.expression)
)

将“file.txt”作为字符串返回。

在 Vue2 中

Vue.directive('custom', 
  bind: function (el, binding) 
    console.log(binding.expression)
  
)

将返回

[Vue 警告]：实例上未定义属性或方法“文件” 但在渲染期间引用。确保声明反应数据 数据选项中的属性

和

[Vue 警告]：渲染函数中的错误：“TypeError：无法读取属性 'txt' of undefined"

这意味着我在 Vue2 中的表达式不再是一个字符串，而是一个变量。我现在如何让它返回一个字符串？

【参考方案1】：

只需将您的文本用单引号括起来，使其成为字符串文字。但是，正如您在评论中指出的那样，如果尝试访问 binding.expression，它将包含换行单引号。相反，您应该使用 binding.value 属性。

模板：

<div id="app">
  <div v-custom="'file.txt'"></div>
</div>

Javascript：

Vue.directive('custom', 
  bind: function (el, binding) 
    console.log(binding.value)
  
)

new Vue(
    el: '#app'
)

Sample Fiddle.

【讨论】：

这确实使表达式成为文字，但也将单引号添加到字符串中。我希望有一个解决方案，我不必去掉引号就可以得到我想要的结果。

这是正确的，因为您实际上是在请求绑定表达式。我已经更新了我的答案。您可以直接从包含未包装字符串文字的 binding.value 中获取值。

是的，答案现在返回 Vue1 中的字符串。完全不同的方法。