實習專案開發總結
阿新 • • 發佈:2018-11-03
本文來自於自己的經驗總結,並不一定是最好的,或最規範的。如果你有任何建議十分歡迎提出
非父子元件間的通訊
- 在src中建立一個eventbus.js作為eventbus的中轉站
- 使用emit與on來在不同元件中監聽事件
import Vue from 'vue'
export default new Vue();
//建立eventBus中轉站
import EVENTBUS from '@/eventBus'
//在需要用到的元件中匯入eventbus
updateList(){ EVENTBUS.$emit('updateList', 1) } //註冊事件,並傳遞引數
activeGetSpliter() {
EVENTBUS.$on('activeGetSpliter', reg => {
this.isLoading = true;
this.isActive = false;
this.getSpliter(reg);
});
},
//監聽事件,處理引數
在Vue中操作DOM
其實如果使用了VUE,個人認為不與DOM打交道是最好的:)
@click='changeSpliter(spliterIndex, $event)' //在函式中傳遞一個叫$event的引數
var spliterDOM = $event.target.parentNode.previousElementSibling.childNodes[0];
//如此便可以獲取DOM
console.log($event.target)
//可以如此來觀察所選取的是何元素
v-for巢狀迴圈
想象下列場景,從後端得到的json物件裡有一backUp陣列,陣列由數個物件組成,每個物件裡包含一個字串型別的spliter_id,和一個brand_arr的陣列。brand_arr陣列中有數個物件,每個物件包brand_id和一些其他的brand基本資訊。現在要將數個spliter_id展示,且在其下方展示其包含的brand_id。
<div>
<div
v-for='(spliter, spliterIndex) in backUp'
:key='spliterIndex'
><!--單個spliter-->
{{ spliter.spliter_id}}
</div>
<div
v-for='(brand, brandIndex) in spliter.brand_arr'
:key='brandIndex'
><!--單個brand-->
{{ brand.brand_id }}
</div>
</div>
注意兩個v-for中的引數使用。使用合適的引數可以很快捷的完成迴圈巢狀,來展示包含多個層級關係的資料
原文地址:https://segmentfault.com/a/1190000016835154