1. pageInstance不能掛載在data上 => 擴(kuò)展：Function對象不能掛載在data上
letpages=getCurrentPages();this.pageInstance=pages[pages.length-1];// 會報錯letpageInstance=pages[pages.length-1];// 不報錯
解決：用的時候重新調(diào)用一遍獲取问裕。
2. 在父組件里對引用的自定義組件及組件內(nèi)部設(shè)置樣式無效果
<template><viewclass="test"><tabbar-itemv-for="item in tabbars":key="item.name":class="{ 'no-border-button': fullPath === item.path }">...</tabbar-item></view><template><stylelang="scss">.test { // 有效逮壁，.tabbar-item,.tabbar-item-content是自定義組件內(nèi)部的class .tabbar-item {...} .tabbar-item-content {...}}</style><stylelang="scss"scoped>.no-border-button {...} // 無效</style>
解決：用全局樣式，不用scoped
3. 對自定義組件設(shè)置普通監(jiān)聽事件無效粮宛，需內(nèi)部觸發(fā)事件
<cellclass="cell"title="合規(guī)商戶"is-link @click="handleMarketClick(item, 0)"http:// 單方面設(shè)置無效>...</cell>
解決：
// cell.vue<viewclass="cell"@click="$emit('click')">// 需要內(nèi)部觸發(fā)...</view>
4. scroll-view的upper-threshold設(shè)為0的話不觸發(fā)scrolltoupper
<scroll-viewclass="scroll-view":scroll-y="true":upper-threshold="0":lower-threshold="300"@scroll="handleScroll"@scrolltoupper="handleScrolltoupper"@scrolltolower="handleScrolltolower">
解決：設(shè)置為不為0的小數(shù)字
5. mixins的components不能混入
// 會報錯找不到mixins里面定義的組件<testComponent><template><view>...<testComponent/>...</view></template><script>export default { mixins: [test], ...}</script>
// test.jsimporttestfrom'...'exportdefault{components:{test},...}
擴(kuò)展：與template有關(guān)系的用components作復(fù)用窥淆，與script有關(guān)系的用mixins復(fù)用 或者 抽取成為公共js使用
解決：components及其引入放在組件里做
// 可正常使用components和mixins里面的js<template> <view> ...
? ? <testComponent/>? ? ...
? </view></template><script>import test from '...'
export default {
? mixins: [test],
? components: { test },
? ...
}</script>
6.?this.$refs獲取不到設(shè)置了ref的元素
嘗試：(1) 內(nèi)置組件如官方所示，獲取了undefined巍杈。
(2) 對自定義組件使用$refs忧饭，在mounted和onReady時機(jī)下可以獲取到值。
<testref="textArea"> <textclass="title">{{title}}111</text></test>...importtestfrom'@/components/test/test.vue'exportdefault{components:{test},...
(3)子組件slot中自定義組件的$refs筷畦，直接this.$refs獲取不到词裤，需經(jīng)過子組件的一層$refs才能獲取到內(nèi)部的$refs，如下
<test> <titleBoxclass="title"ref="childTitle">{{title}}111</titleBox></test>...importtitleBoxfrom'@/components/cell.vue'importtestfrom'@/components/test/test.vue'exportdefault{components:{test,titleBox},mounted(){console.log('mounted: ',this.$refs.childTitle)// 輸出 mounted: undefined},onReady(){console.log('onReady: ',this.$refs.childTitle)// 輸出 onReady: undefined},...
此時是獲取不到this.$refs.childTitle的鳖宾，它是屬于子組件底下的$refs
解決
<testref="textArea"> <titleBoxclass="title"ref="childTitle">{{title}}111</titleBox></test>...importtitleBoxfrom'@/components/cell.vue'importtestfrom'@/components/test/test.vue'exportdefault{components:{test,titleBox},mounted(){console.log('mounted: ',this.$refs.textArea,this.$refs.textArea.$refs.childTitle)},onReady(){console.log('onReady: ',this.$refs.textArea,this.$refs.textArea.$refs.childTitle)},...
參考：https://www.lervor.com/archives/121/
7. 一些基礎(chǔ)組件如icon無監(jiān)聽點(diǎn)擊事件
解決：可在外層包一個view作事件監(jiān)聽
<viewclass="clear-icon"@click="onClear"><iconv-if="showClear"type="clear"size="16"></icon></view>
8. class綁定里吼砂，如果一個對象里有多個屬性值，渲染出來的class會帶英文逗號 ,
<view:class="[styleType==='text'?'segmented-control__item--text':'segmented-control__item--button',{'segmented-control__item--button--active':index===currentIndex&&styleType==='button','segmented-control__item--button--first':index===0&&styleType==='button','segmented-control__item--button--last':index===values.length-1&&styleType==='button',disabled:item.disabled}]">
class渲染的結(jié)果：
segmented-control__itemdata-v-5311d210 segmented-control__item--text,,,disabled
此時disabled就失效了鼎文。
解決：拆開來賦值渔肩。
styleType === 'text'? ? 'segmented-control__item--text'? : 'segmented-control__item--button',{? 'segmented-control__item--button--active':? ? index === currentIndex && styleType === 'button'},{? 'segmented-control__item--button--first':? ? index === 0 && styleType === 'button'},{? 'segmented-control__item--button--last':? ? index === values.length - 1 && styleType === 'button'},{ disabled: item.disabled }
class渲染的結(jié)果：
segmented-control__itemdata-v-5311d210 segmented-control__item--text? ? disabled
9. 不能在template里直接寫js方法（也不美觀），編輯器不會報錯拇惋，但模擬器會報錯編譯失敗周偎，build error => 擴(kuò)展：不可在template中寫js代碼
<van-field...@input="? isX(form.shopIdcard,()=>{form.shopIdcard=form.shopIdcard+'X';})"/>
解決：把這種方法放在methods里
<van-field...@input="handleInput"/>...methods:{handleInput(){isX(form.shopIdcard,()=>{form.shopIdcard=form.shopIdcard+'X';})}}
10. picker-view的注意點(diǎn)：
(1)注意要加<picker-view-column>抹剩，否則會報錯。必須有一層元素包住內(nèi)容蓉坎。
(2)在初始為空內(nèi)容（如此處的areaList初始為[]）時渲染則會出現(xiàn)不可滑動的情況澳眷。因?yàn)樵阡秩緯r會根據(jù)初始內(nèi)容確定每一項(xiàng)高度，后續(xù)無法動態(tài)確定高度蛉艾。必須加上v-if="showPicker"
<viewv-if="showPicker"class="picker-box">? <picker-view :value="currentPick" @change="handlePickerChange">
? ? <picker-view-column>? ? ? <viewv-for="(item, index) in areaList":key="index">{{item.text}}</view>? ? </picker-view-column>? </picker-view>? <viewclass="picker-view mask"></view>? <button class="button" @click="onConfirmSearchArea">
? ? 確認(rèn)
? </button></view>
11. 在checkbox或radio外包一層label就可以點(diǎn)擊文字部分也能控制checkbox或radio的選中了（文檔中未講但示例中有此寫法）
<checkbox-group@change="handleManageModeChange"><labelclass="checkbox-item"v-for="item in manageModeSelection":key="item.dictCode"><p>{{item.dictName}}</p><checkboxclass="checkbox":value="item.dictCode":checked="item.checked"color="#1989fa"/></label></checkbox-group>
12. 數(shù)組的深層監(jiān)聽無效
watch:{arr:{handler(val){...},deep:true}}
13. 不支持new Function()和eval()
(1) new Function()
mounted(){letfuncStr=this.checkIDCard.toString();letfunc=newFunction('return '+funcStr);console.log(funcStr,func,Object.prototype.toString.apply(func));// 運(yùn)行func()會報錯TypeError: func is not a function},methods:{checkIDCard(){...}}
打印
(2)eval()
mounted(){letfuncStr=this.checkIDCard.toString();// 轉(zhuǎn)函數(shù)為字符串钳踊，可作為參數(shù)傳遞至別的方法或組件中；// 或this.checkIDCard + ''或String(this.checkIDCard)letfunc=eval("(false || "+funcStr+")");// 報錯},methods:{checkIDCard(params){...}}
控制臺報錯
14. regexp和function無法參與到組件間參數(shù)props傳遞
// parent.vue<testref="textArea":getValue="getValue":pattern="pattern"></test>...components:{test},data(){return{pattern:/\d/}},methods:{getValue(params){console.log(params)}}
// test.vueprops:['getValue','pattern'],mounted(){console.log(this.getValue,this.pattern)},
打印
如圖伺通，經(jīng)過props傳遞的兩個參數(shù)箍土，function變成未定義逢享，regExp變成空對象罐监。
解決：
對于正則表達(dá)式：可傳遞字符串后，在目標(biāo)位置new RegExp(regexpStr)
// parent.vuepattern:"\\d"
// test.vueletregexp=newRegExp(this.pattern)console.log(this.getValue,regexp,regexp.test('abc'))// 已可以正常使用正則的方法
打印
對于函數(shù)：new Function('return '+funcStr)無效瞒爬；可通過其余方法繞行調(diào)用如父子組件$emit
替換辦法：
// parent.vue<testref="textArea":getValue="funcName":pattern="pattern"></test>...components:{test},data(){return{pattern:"\\d",funcName:"getValue"}},methods:{getValue(params){console.log(params)}}
// test.vueprops:['getValue','pattern'],mounted(){console.log(this.$parent[this.getValue],regexp,regexp.test('abc'))},
打印
拓展：在h5中弓柱，函數(shù)字符串轉(zhuǎn)函數(shù)的方法有
(1) new Function()
functioncheckIDCard(params){...}exportdefault{...mounted(){letfuncStr=checkIDCard.toString();// 轉(zhuǎn)函數(shù)為字符串，可作為參數(shù)傳遞至別的方法或組件中侧但；// 或checkIDCard + ''或String(checkIDCard)letfunc=newFunction('return '+funcStr)();// 轉(zhuǎn)字符串為函數(shù)letparams=...func(params);// 運(yùn)行函數(shù)},methods:{checkIDCard(params){...}}}
(2)eval()
functioncheckIDCard(params){...}exportdefault{...mounted(){letfuncStr=checkIDCard.toString();// 轉(zhuǎn)函數(shù)為字符串矢空，可作為參數(shù)傳遞至別的方法或組件中；// 或checkIDCard + ''或String(checkIDCard)letfunc=eval("(false || "+funcStr+")");// 轉(zhuǎn)字符串為函數(shù)letparams=...func(params);// 運(yùn)行函數(shù)},methods:{checkIDCard(params){...}}}
注：若使用this.checkIDCard會出錯禀横，因?yàn)閠his.checkIDCard.toString()=>"function () { [native code] }"屁药，這種字符串無法作為js代碼執(zhí)行。
