Attribuer des propriétés statiques dans le composant pour Vue JS 2

Question

Je suis un peu confus quant à la transmission d'accessoires statiques aux composants dans la documentation VUEJS 2.

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>

Si je ne lie pas cet accessoire, je ne le vois pas dans le modèle de composant.

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

Si je le lie mais qu'il n'y a aucune donnée dans l'application, j'obtiens une erreur. Il doit s'agir de données statiques allouées dans le composant de traduction.

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

L'ajout de guillemets simples fonctionne, mais la documentation ne le montre pas.

Ai-je raté quelque chose quelque part ?

Edit : Ajouter des composants enregistrés globalement

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

Answer 1

En fait, quand vous écrivez du code comme celui-ci

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

Cela signifie que vous les obtiendrez avec des accessoires de type chaîne body绑定，并将行数与字符串3绑定，你应该能够通过组件translation.

Mais si tu écris comme ça

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

Le type d'attribut n'est pas valide car body n'est pas une variable ou quoi que ce soit d'autre.

Quand tu écris comme ça

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

C'est exactement la même chose que le premier exemple, vous liez le type à une chaîne body绑定，将行数与字符串3 et le numéro de ligne à une chaîne 3, si vous souhaitez lier le type à une chaîne, numéro de ligne Pour lier avec des nombres, vous je peux essayer ça :

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

J'espère que cela aide.