在组件中分配Vue JS 2的静态属性

Question

我对在VUEJS 2文档中向组件传递静态props有些困惑。

https://v2.vuejs.org/v2/guide/components-props.html#Passing-a-Number

<!-- 即使`42`是静态的，我们仍然需要使用v-bind来告诉Vue -->
<blog-post v-bind:likes="42"></blog-post>
<!-- 这是一个JavaScript表达式而不是一个字符串。       -->

<translation :phrase="language.exit" type="body"lines="3"></translation>

如果我不绑定这个prop，我在组件模板中看不到它。

<translation :phrase="language.exit" :type="body" :lines="3"></translation>

如果我绑定它但是应用中没有数据，我会得到一个错误。它们应该是在翻译组件中分配的静态数据。

<translation :phrase="language.exit" :type="'body'" :lines="'3'"></translation>

添加单引号可以工作，但是文档中没有显示这个。

我是不是在某个地方漏掉了什么？

编辑：添加全局注册的组件

Vue.component('translation', {
  props: ['phrase', 'type', 'lines'],
  template: '<span>{{ phrase }} - {{ type}} - {{ lines }}</span>'
});

Answer 1

实际上，当你像这样编写代码时

<translation :phrase="language.exit" type="body" lines="3"></translation>

这意味着你将类型与字符串body绑定，并将行数与字符串3绑定，你应该能够通过组件translation的props获取它们。

但是，如果你像这样编写

<translation :phrase="language.exit" :type="body" :lines="3"></translation>

属性type是无效的，因为body不是一个变量或其他任何东西。

当你像这样编写

<translation :phrase="language.exit" :type="'body'" :lines="'3'"></translation>

它与第一个示例完全相同，你将类型与字符串body绑定，将行数与字符串3绑定，如果你想将类型与字符串绑定，行数与数字绑定，你可以尝试这样做：

<translation :phrase="language.exit" type="body" :lines="3"></translation>

希望对你有所帮助。