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标记要获取的元素:

weex vue使用记录

父组件在使用子组件标签时 也用ref标记子组件

weex vue使用记录

父组件中用this.$refs.years(子组件标记名称).$refs.item5(元素标记名称)

weex vue使用记录
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能获取到的情况下,需要加一个延时才有用。
weex vue使用记录

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上点击输入框中的叉,再搜索时,页面因为从七牛云上取下的图片加载问题而卡死。是因为在点击叉的时候,没有把存储结果的数组清空,而导致图片加载后第二次路径才发生变化。
weex vue使用记录
19.weex中的<text>里面只能写文字,且最好不要加回车或者空格,会导致位置问题,或者直接不显示。

未完待续。。。。

相关推荐