何时在传递给 Vue 组件的属性上使用“：”？

Posted 2023-02-23

【中文标题】何时在传递给 Vue 组件的属性上使用“：”？

【英文标题】：When to use ":" on property passed to component in Vue?

【发布时间】：2019-11-17 01:50:59

【问题描述】：

我在一个组件中看到了一个示例代码块，它向下传递了两个道具。一个使用“：”，而另一个不使用。但我无法弄清楚为什么一个人需要而一个人不需要。它代表什么以及它如何影响传递的信息？

<date-picker
      format="D MMM YYYY"
      :options=" firstDay: 1 ">
</date-picker>

在组件内部

    props: 
        format:  default: 'YYYY-MM-DD' ,
        options:  default:  
    

【问题讨论】：

您在组件中为format 获得了哪些价值？ `

很简单：使用元素属性：如果您传递纯文本，请不要使用冒号。如果您要传递任何其他值，请使用它。带对象：先学 javascript，再学 JS 框架。反之亦然。

@VladislavLadicky 真的很抱歉，但你能指出我传递元素属性的任何参考吗，我相信你传递纯文本与对象是正确的，但我从未读过这个被提及任何地方。它是否会与 v-bind 冲突或受到影响，因为“：”是它的简写？

【参考方案1】：

模板中的

: 是 v-bind mean for data binding 的简写，这意味着在您的情况下 :option 是告诉右侧的字符串是 javascript 变量。而后者只是一个普通的 javascript 对象，不需要绑定。 这里有一些参考链接：https://v1.vuejs.org/guide/syntax.html

【讨论】：

但问题是 :option 没有绑定到任何东西。然而，当我删除“：”时，它会中断。 “格式”反之亦然，如果我尝试使用“：”“绑定”它，它就会中断。

绑定的意思可能有点错位，但它实际上只是意味着右侧的字符串在 javascript 中对其进行评估。因为普通的 HTML 只能通过没有:

的字符串传递