weex vue使用記錄

1.父組件向子組件傳值
父組件中：
在子標籤上用:hospitalShow="hospitalShow"綁定傳遞數據
子組件中：在props中接收過來的值就可使用了
`props:{

hospitalShow:{
            type:Boolean
        }
    },`

2.子向父傳值
(1)父組件中:引用插入標籤以後，在子標籤上使用@receiveData="receiveData"去監聽receiveData事件;
(2)子組件中:須要傳遞的地方使用$emit觸發receiveData事件，傳入須要傳遞的參數;
(3)父組件中:在methods中定義receiveData方法去接收處理傳過來的值:

receiveHospital :function(data,show) {
        this.selectedHospital = data;
        this.hospitalShow = show;
},

3.父組件獲取子組件中的某個元素
子組件中用:ref標記要獲取的元素：

父組件在使用子組件標籤時 也用ref標記子組件

父組件中用this.$refs.years(子組件標記名稱).$refs.item5(元素標記名稱)

4.向後臺獲取的對象中增長屬性，用vue.set方法，首先須要引入vue,

import Vue from 'vue'

例如:

this.disease.forEach(function (item) {
                            Vue.set(item, 'isSelected', false);
                        })

當操做數組須要更新試圖的時候，也使用set方法來實現，splice等方法不會同步更新視圖，例如：

for(let i = 0,len=this.showHistory.length;i<len;i++){
     this.$set(this.showHistory,i,'');
}

5.v-model爲對象數組，在input中想展現全部對象的name，須要用到computed屬性：

computed:{
            subMajor(){
                let sub='';
                this.selectedSubMajor.forEach(function(v,i){
                sub+=v['majorName']+'、';
                })
                return sub;
            }
        },

展現時：

<div class="input" v-if="careerType===1">
                    <text class="star">*</text>
                    <text class="label">亞&nbsp;專&nbsp;業</text>
                    <input type="text" class="input-box" v-model='this.subMajor'placeholder=" 請選擇你的亞專業"  >
                    <text class="iconfont iconText">&#xe62d;</text>
                </div>

6.安卓調試問題

想在手機端看看樣式的展現，控制檯輸入weexpack run android,報錯：adb failed to start daemon;
解決辦法：輸入adb nodaemon server，他提示5027端口被佔用，再輸入netstat -ano | findstr "5037"，查看到它的pid，而後在任務管理器中手動關閉它，就能夠解決報錯問題。

7.箭頭函數問題，獲取數據後，須要根據id回填上對應的姓名，想遍歷departmentList，寫成 this.departmentList.forEach(function(item){})語句不執行也不報錯，須要寫成：

this.$ajax(this.getUrlConfig().url_new+'api/doctor/basicInfo/v1/getDoctorInfo',
                `id=34`,
                ).then((res)=>{
                    this.doctorData = res.data.data;
                }).then(()=>{
                    this.departmentList.forEach((item)=>{
                        if( item.id == this.doctorData.departmentId) {
                            this.selectedDepartment = item;
                        }
                    })
                })
                .catch(()=>{
                // 回調響應錯誤
            });

8.weex andorid驚天大祕密！！！！父組件接收子組件傳回的值時，子標籤中綁定監聽事件@main-event="receiveSelectedMainMajor"在電腦上功能沒有問題，但在手機上不起做用，由於監聽事件的名字中不能有-.搞了好半天 原來是這種問題 = =
9.若是頁面中不寫

beforeRouteLeave(to, from, next) {
            to.meta.keepAlive = true;
            next();
        },

會致使在安卓手機上觸發不了返回按鈕。

10.執行weexpack run android時，報錯 stderr maxBuffer exceeded,須要更改C:Usersadmin.xtoolkitnode_modulesweexpacksrcutils下的index.js解決辦法
11.`data(){

return{
    imgUrl:this.getUrlConfig().url_qn
    }

}`
data中不能用變量給變量賦值 手機上會報錯

12.在安卓手機上，別操做dom，別使用:style,前者在手機上會報錯，後者不起做用。綁定樣式時，不能用:class="{isShow : 'show'}"的方式，手機也不起做用，必須用:class="[isShow ? 'show' : 'no']"的形式。
13.flex佈局問題：用了weex感受不少之前用的佈局方式都不起效果了，那weex的flex佈局確定能幫到你：weex的flex
14.在頭部組件中須要傳入字體圖標，可是變量形式的傳""後，瀏覽器並不能解析成圖標展現出來，這時候只須要把''換成ue685就能夠照常傳遞了。
15.沒有搜索出內容的時候，須要點擊下面從新搜索，清空輸入框，而且獲取其焦點，weex官網上給出的例子是直接<text>上使用$ref.input.foucs(),實際使用時沒有效果，在保證$ref.searchInput能獲取到的狀況下，須要加一個延時纔有用。

emptySearchText : function () {
                this.searchText = '';
                let stv = setTimeout(()=>{
                    this.$refs.searchInput.focus();
                },0);
            },

16.數組去重有許多方法，到目前爲止，我看到的最簡潔的代碼是ES6中的數組去重

Array.from(new Set(arr))

17.setTimeout箭頭函數問題：

let stv = setTimeout((function() {
     this.isShowNotice();
}),300)

這樣寫在mount中，this能到，若是寫成箭頭函數形式，

let stv = setTimeout(=>() {
     this.isShowNotice();
}.bind(this),300)

this指向爲window
18.搜索第一次的時候結果能正確展現，可是在android APP上點擊輸入框中的叉，再搜索時，頁面由於從七牛雲上取下的圖片加載問題而卡死。是由於在點擊叉的時候，沒有把存儲結果的數組清空，而致使圖片加載後第二次路徑才發生變化。

19.weex中的<text>裏面只能寫文字，且最好不要加回車或者空格，會致使位置問題，或者直接不顯示。

未完待續。。。。