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>里面只能写文字，且最好不要加回车或者空格，会导致位置问题，或者直接不显示。

未完待续。。。。