Weisen Sie statische Eigenschaften in der Komponente für Vue JS 2 zu

Question

Ich bin etwas verwirrt über die Übergabe statischer Requisiten an Komponenten in der VUEJS 2-Dokumentation.

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>

Wenn ich diese Requisite nicht binde, sehe ich sie nicht in der Komponentenvorlage.

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

Wenn ich es binde, aber keine Daten in der App vorhanden sind, erhalte ich eine Fehlermeldung. Es sollten statische Daten sein, die in der Übersetzungskomponente zugewiesen werden.

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

Das Hinzufügen von einfachen Anführungszeichen funktioniert, aber in der Dokumentation wird dies nicht angezeigt.

Habe ich irgendwo etwas verpasst?

Bearbeiten: Global registrierte Komponenten hinzufügen

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>

希望对你有所帮助。