const app = Vue.createApp({
  data() {
    return {
      text: '外部元件文字',
    };
  },
}).component('alert', {
  // 全域註冊方法1
  data() {
    return {
      text: 'alert 的 text'
    };
  },
  template: `<div class="alert alert-primary" role="alert">
      {{ text }}
    </div>`
});
// 全域註冊方法2
app.component('alert2',{
  data() {
    return {
      text: 'alert2 的 text'
    };
  },
  template: `<div class="alert alert-primary" role="alert">
      {{ text }}
    </div>`
});

// 也可以事先先定義好物件
// 但是需要注意要在前面就定義好，否則會取不到
  const alert3 = {
    data() {
      return {
        text: '元件3'
      };
    },
    template: `<div class="alert alert-primary" role="alert">
    {{ text }}
  </div>`
  }
  app.component('alert3',alert3);

// 最後才會將元件掛載在#app上
app.mount('#app');