學習筆記

這次主要紀錄在可動態增減的component中，透過EventBus和父層做溝通的處理方式。

情境:
動態的圖片上傳component，上傳完後要顯示圖片在該component上

構想 :
多個上傳按鈕，但真正的上傳按鈕只有一個(隱藏起來)，不管點了哪個上傳按鈕都去呼叫唯一的那個上傳功能，但是在註冊eventBus事件傳遞時，監聽的名稱都是一樣的，所以乾脆把物件本身丟入eventBus，然後在上傳完成時直接拿eventBus裡的資料出來把圖片url塞回去。




實際程式碼 :
// 在eventBus中加入data屬性讓呼叫者直接把自己物件傳入
var eventBus = new Vue({
    data: {
        target: []
    }
});

props: {
model: {
type: Object,
},
},
data: function () {
return {
widgetModel: this.model,
}
},

methods: {
clickUpload: function (index) {
eventBus.$data.target = this.widgetModel[index];
$('#fileupload').click();
},
}

mounted: function () {
$('#fileupload').fileupload({
autoUpload: true,// 自動上傳
url: '上傳圖片的API位置',
add: function (e, data) { //選擇圖片後會跑入這個事件
//驗證
if (!data.files[0].name.match(/^[\S\s]+\.{1}(jpg|png|jpeg|gif){1}$/i)) {
alert('只能上傳圖片')
return;
}
data.submit();
},
done: function (e, data) {
eventBus.$data.target.ImageUrl = data.result.Response[0];
},
fail: function (e, data) {
alert('上傳圖片失敗');
}
});
},