元件介紹-Day02 #註冊元件的手法


元件基本範例及結構-如何註冊vue元件?

  • 元件使用的基本要點
    .conponent("參數1/元件名稱",{
        data() {
            return {
                text:"內部元件文字"
            };
        },
        template: `
            <div class="alert alert-primary" role="alert">
                {{ text }}
            </div>
        `
    });
    
    • 元件需要在 createApp 後,mount 前進行定義
    • 元件需指定一個名稱
    • 元件結構與最外層的根元件結構無異(除了增加 Template 的片段)
    • 元件註冊中的樣板template片段
    • 元件另有 prop, emits 等資料傳遞及事件傳遞

如何在畫面上顯示我們所註冊設定的元件呢?


回過來說,元件有幾個不同的註冊方式

###全域註冊


###區域註冊

  • 在程式碼最前面宣告區域元件物件
  • 在掛載在根元件或是其他子元件下的components:{}物件中

    • 這裡先以將區域註冊元件,掛載在根元件下為例子


  • 下面以將區域註冊元件掛載在其他子元件為例子,alert3寫入模板的位置會有點不同,需要寫在子元件的template中

  • 元件3(區域註冊的元件)只能在元件2(全域註冊)下啟用
  • 無法在其他元件下啟用

模組化(元件另外獨立成一個檔案)

  • 把元件另外獨立成一個檔案
  • 再透過es6 module的方式在進行匯入
  • 如何在vue檔案中進行匯入?完整版
  • 出現:







你可能感興趣的文章

Web開發學習筆記07 — bind、call、apply

Web開發學習筆記07 — bind、call、apply

打造電商網站優游網站前後端系列

打造電商網站優游網站前後端系列

關於產品開發,PRD 的作用與內容介紹

關於產品開發,PRD 的作用與內容介紹






留言討論