元件介紹-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檔案中進行匯入？完整版
  
• 出現：