在元件中指派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>

希望對你有幫助。