元件使用的基本要點

• 元件需要在 createApp 後，mount 前進行定義
• 元件需指定一個名稱
• 元件結構與最外層的根元件結構無異（除了增加 Template 的片段）
• 元件另有 prop, emits 等資料傳遞及事件傳遞

27-0 js

<script type="module">

	import alert4 from './alert-component.js';
	//區域註冊
const alert3 ={
	data() {
      return {
        text: '元件3'
      };
    },
		// 需決定掛在哪個根元件或子元件下
    template: `<div class="alert alert-primary" role="alert">
      {{ text }}
    </div>`
}
  // 注意，這段起手式與先前不同
  const app = Vue.createApp({
    data() {
      return {
        text: '外部元件文字',
      };
    },
		components:{
			alert4,alert3
		},
		//加在app根元件內
		// components:{
		// 	alert3
		// }
		//全域註冊方法1
  }).component('alert', {
    data() {
      return {
        text: '內部文字'
      };
    },
    template: `<div class="alert alert-primary" role="alert">
      {{ text }}
    </div>`
  });
//全域註冊方法2
  app.component('alert2',{
    data() {
      return {
        text: '文件2'
      };
    },
			components:{
			alert3
		},
    template: `<div class="alert alert-primary" role="alert">
      {{ text }}
    </div>`
  })
  app.mount('#app');
</script>

27-1

<div id="app">
    <alert></alert>
    <h4>全域註冊</h4>
    <alert2></alert2>
     <h4>區域註冊</h4>
     <alert3></alert3>
     <h4>模組化</h4>
     <alert4></alert4>
</div>

.
知識點來源:六角課程

以上是今天所提供知識點如有誤，再請務必在下面留言~