Tetapkan sifat statik dalam komponen untuk Vue JS 2

Question

Saya agak keliru tentang menghantar prop statik kepada komponen dalam dokumentasi 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>

Jika saya tidak mengikat prop ini, saya tidak melihatnya dalam templat komponen.

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

Jika saya mengikatnya tetapi tiada data dalam apl, saya mendapat ralat. Ia mestilah data statik yang diperuntukkan dalam komponen terjemahan.

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

Menambah petikan tunggal berfungsi, tetapi dokumentasi tidak menunjukkan ini.

Adakah saya terlepas sesuatu di suatu tempat?

Edit: Tambahkan komponen berdaftar global

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

Answer 1

Sebenarnya, apabila anda menulis kod seperti ini

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

Ini bermakna anda akan mendapatkannya dengan prop daripada rentetan jenis body绑定，并将行数与字符串3绑定，你应该能够通过组件translation.

Tapi kalau tulis macam ni

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

Jenis atribut tidak sah kerana body bukan pembolehubah atau apa-apa lagi.

Apabila anda menulis begini

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

Ia betul-betul sama seperti contoh pertama, anda mengikat jenis kepada rentetan body绑定，将行数与字符串3 dan nombor baris ke rentetan 3, jika anda ingin mengikat jenis kepada rentetan, nombor baris Untuk mengikat dengan nombor, anda boleh cuba ini:

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

Semoga membantu.