在元件中指派Vue JS 2的靜態屬性
P粉392861047
P粉392861047 2024-04-02 23:34:59
0
1
515

我對在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>'
});
###
P粉392861047
P粉392861047

全部回覆(1)
P粉384366923

實際上,當你像這樣寫程式碼時

<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>

希望對你有幫助。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!