Quasar 學習筆記 Ep 05 - Quasar 自製標籤的 Props 輸入與 Data() 輸出
Quasar 自製標籤的 Props 輸入與 Data() 輸出 前一篇分享最後面有提及，使用 HTML 標籤時，通常會在標籤中加入一些屬性，例如： < q-layout view = "lHh Lpr lFf" > < q-header elevated > < q-btn flat dense round icon = "menu" aria-label = "Menu" @ click =" toggleLeftDrawer "/ > 我們所設計的 <say-hello/> 標籤，只會固定輸出 Hello World!，如果我們希望，讓 World 變成一個可變動的字串，當我們單純使用<say-hello/> 時，就輸出 Hello World!，但是如果我們加入的屬性 <say-hello msg = "Quasar" /> 。就會輸出 Hello Quasar!。 從這篇分享中，你可以學到： 標籤屬性設計 從標籤傳入屬性值 JavaScript 對文字物件的處理 props 與 data() 的比較 data() 的語法 從 SayHello 複製 SayHello2 元件 為了不影響 SayHello 元件，請在 components 目錄新增一個 SayHello2.vue，並 Copy SayHello 元件的內容。 就操作的方便性來說，可以在 SayHello.vue 上面按滑鼠右鍵選複製，然後在 Components 目錄上面按滑鼠右鍵選貼上。然後重新命名，開啟 SayHello2.vue 後，針對內容做一些小修改以免跟 SayHello 完全相同，修改後如下： < template > < h4 > Hello World! </ h4 > </ template > < script > export default { name : 'SayHello2' } </ script > <!-- Add "scoped"
