我不是寫文章方面的能手，在vue中不斷的學習和入坑，寫一些小技巧和解決方法，如果您是大佬，那請大佬給小弟我一些意見（剛剛開始哦）
選單
這可能是我見過的（現在）最好用的移動端拖拽的vue.js元件了
生命週期之destroyed簡單使用
vue中常用的路由傳遞引數的技巧
vue中ui(vant)中按需載入
vue路由設定相關標題
vue中使用第三方ui框架之樣式穿透方式
vue中傳遞引數的幾種方式（非路由）
minxins的好處
——————————————————————————————簡單的分割線
<a id="vue-01"target="_self">這可能是我見過的（現在）最好用的移動端拖拽的vue.js元件了
有這樣的需求，需要在移動端移動/拖拽相關的選單，並在其他地方（可能是父子路由，也可能是獨立的路由之間保持同步關係的時候，就需要使用拖拽元件來解決需要的問題了），
強大的元件地址vue-slicksort
上面的gif截圖中的效果，使用的就是[vue-slicksort]這個強大的元件來完成的，首先我先將我實現的程式碼奉上，請各位朋友，給我相關的建議哦
1.1 先進行元件安裝方式
####### 1.1.1(npm方式)
$ npm install vue-slicksort --save
複製程式碼####### 1.1.2(yarn方式)
$ yarn add vue-slicksort
複製程式碼1.2然後在子元件中的template模板中建立相關的骨架，如下(稍後會簡單說明其中引數的含義)
<div class="root">
<SlickList lockAxis="y" v-model="dropmenu" :useDragHandle="useDragHandle":pressDelay="pressDelay"
@sortStart="onsortStart($event)"ref="SlickList"@input="oninput($event)">
<SlickItem v-for="(item, index) in dropmenu"v-if="index>0" :index="index" :key="index">
<div class="menu-list">
<div class="list-left">
<span class="iconfont icon-caidan"></span>
<span class="text">{{item.title}}</span>
</div>
<div class="list-right">
<span class="iconfont icon-kaiguan4"></span>
</div>
</div>
</SlickItem>
</SlickList>
</div>
複製程式碼2.接著匯入官網文件中提出的元件
<script>
import { SlickList, SlickItem } from 'vue-slicksort';
props:{
//通過父傳遞給子的選單列表（也可能是物件）
menu:[Array,Object],
currentItem:Number,
dragListShow:Boolean,
dragTitle:String,
useDragHandle:Boolean,
pressDelay:Number,
},
data(){
return{
currentIndex:this.currentItem,//移動的下標
username:'',
dropmenu:this.menu,//需要拖動的目標源(如選單)
}
},
methods:{
onsortStart(e){
},
oninput(list){
localStorage.setItem('droplist',JSON.stringify(list))
},
},
components:{
SlickItem,
SlickList,
},
</script>
複製程式碼3. 相關程式碼中的引數簡述
####### 3.1
####
| 引數名稱 | 型別 | 作用 |
| :-------- | --------:| :--: |
| lockAxis | String | 用於排序時在座標系中鎖定元素的移動 |
| useDragHandle | Boolean（預設是false） | 如果使用HandleDirective，設定為true |
| pressDelay| Number(預設是0)|如果需要當元素被按下一段時間再允許拖拽，可以設定這個屬性 |
|sortStart|event, node, index, collection|當拖拽開始時觸發|
|input|newList|當拖拽結束後產生新的列表時觸發|
#### 結語
複製程式碼4 遇到的問題
####### 4.1當父子元件通訊時，如果子元件props接收的引數，直接使用如下
<div class="root">
<SlickList lockAxis="y" v-model="dropmenu" :useDragHandle="useDragHandle":pressDelay="pressDelay"
@sortStart="onsortStart($event)"ref="SlickList"@input="oninput($event)">
<SlickItem v-for="(item, index) in dropmenu"v-if="index>0" :index="index" :key="index">
<div class="menu-list">
<div class="list-left">
<span class="iconfont icon-caidan"></span>
<span class="text">{{item.title}}</span>
</div>
<div class="list-right">
<span class="iconfont icon-kaiguan4"></span>
</div>
</div>
</SlickItem>
</SlickList>
</div>
//dropmenu將這個變成menu時，會出現沒有效果，這是因為vue官網說了vue 2.x元件之間的關係是單向的,不明白的朋友，可以點選這些
複製程式碼props 很詳細的說明為什麼不能子元件直接修改父元件引數的原因了
生命週期之destroyed簡單使用
大家對於驗證碼這個功能應該不陌生吧，不管是ios,android,還是h5(web app)都寫過相關的，這個功能不難，先上我寫的程式碼吧
export const Btnlist=function ({commit,state},update) {
let count=state.btnlist.btnMinute;
clearInterval(countdonw)
let countdonw=setInterval(CountDown,1000);
function CountDown(){
state.btnlist.disabled1=true;
state.btnlist.updateText=`重新傳送${count}s`;
if(count===0){
state.btnlist.disabled1=false;
state.btnlist.updateText=update
clearInterval(countdonw)
geturl(state)
btnCount++
}
count--;
commit(types.SETBtnlist,state.btnlist)
}
}
複製程式碼簡單描述上面我寫的程式碼的過程，採用vuex的actions進行倒數計時的功能，其中使用了setInterval(function,秒數)讓其進行相關的倒數計時，並讓count--,程式碼不難吧，如果用到當前頁面時，可能不會發現程式碼的相關問題，以為是OK了.........
5.倒數計時出現了什麼問題呢?
####### 5.1 場景和問題(因為專案程式碼，不方便提供截圖和程式碼了)
假如你在login.vue這個元件中編寫了這樣的場景，一個使用者名稱輸入框和密碼輸入框，及提交按鈕，編寫了相關的邏輯（如正則驗證了使用者名稱和密碼是否合法之類的功能），也做了驗證碼的倒數計時功能，準備點提交之後，確實功能實現了，但問題出現了，這邊可能會出現一個問題，
######## 5.1.1 如果跳轉成功後，倒數計時如果還沒有變成0呢，會出現什麼情況（PC和移動端時） ######## 5.1.2 如果點瀏覽器自帶的後退箭頭按鈕，倒數計時又會怎麼樣？（PC瀏覽器端是我們程式設計師故意這麼做的時候） ######### 其中這2種情況，會造成相同的問題，當count還是大於0的時候，一直會在瀏覽器內部執行CountDown()方法，直到count=0的時候，它才會停止，雖然count=0才會停止，可能保證CountDown()方法停止[真的嗎],（本菜鳥這方面沒研究過，有研究過的朋友，可以給我說下原理，本菜鳥先在這邊謝謝了） ######## 5.2 解決方法（本菜鳥的）使用vue的生命週期 destroyed此api方法，可以解決故意後退或者返回相關操作來解決倒數計時問題，虛擬碼如下(寫上你所需要的邏輯即可)
destroyed(){
button=false;
count=0
}
複製程式碼