先前建立組件時輸入和輸出組件都是使用 import/export default,從最小元件的一張圖片 export 給 Home.vue,組完 Home 的畫面再 export 給 APP.vue,過程中並未使用new Vue()語法建立實例,導致後續console.log(this) //undefined
,無法將資料傳回 data 裡。
結構如下:
Stickers.vue 一張圖片
Home.vue v-for 形成四張圖片+api資料
APP.vue 加上 header/footer 形成最終畫面
Home.Vue *
export default {
name: 'Home',
data() {
return {
hotSpots: [
],
}
},
mounted() {
axios.get('url')
.then(function (response){
this.hotSpots = response.data);
console.log(this); //undefined
})
}
慢慢理解到new Vue()是建立一個 Vue實例,用來與 Html 的 DOM 物件作為掛鉤,內容會包含
el:綁定 DOM 元素
data:綁定的資料
methods...等方法
export 用來輸出模塊,Vue 的單文件组件通常需要輸出一个對象,這個對象是 Vue 實例選擇的對象,以便於在其它地方可以使用 import 引入。
參考來源:
https://juejin.cn/post/7005832390102745119
https://medium.com/pierceshih/vue-js-學習筆記-day13-vue實例-72eb192b647c
感謝分享
補充 new Vue() 是 Vue 2 語法,
Vue 3 用 Vue.createApp() 取代 new Vue()
https://book.vue.tw/appendix/migration.html#%E5%85%83%E4%BB%B6%E5%AF%A6%E9%AB%94%E5%BB%BA%E7%AB%8B
Vue 2 support will end on Dec 31, 2023. Learn more about Vue 2 Extended LTS.
The Benefits of the New Vue 3 App Initialization Code