关于vue的一点总结

父组件调用子组件中的方法

1. 引入子组件
2. 注册子组件
3. 在页面中定义
4. 向子组件传值

import account from './accountDetails';

components:{
    PersonSelect: PersonSelect,
    account,
    attachments,
    ReadPicOrFile
  },

 <account ref="mychild" @func="getMsg" @checkData="checkDataStatus"></account>

 

 "dataForm.flowNode":{
      handler(val){
        this.$refs.mychild.approvalLink(val,this.dataForm.reimTypeCode);
      },
      deep: true
    },

注：这种方法在调用子组件时有时会提示undefined

子组件调用父组件中的方法时一直提示undefined，提示找不到这个方法或者没有这个属性

• 原因：父组件没有得到子组件的实例，子组件没有在页面初始化时加载，而是在某个方法中定义
• 解决：在this.$nextTick 方法中去调用子组件的方法
• 作用：在下次dom更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获得更新后的dom。
• 这样调用就没有问题了

"dataForm.flowNode":{
       handler: function(val) {
         this.$nextTick(()=>{
          this.$refs.clChild.approvalLink(val,this.dataForm.reimTypeCode);
        })
        
      },
      deep: true
    },

 

 

判断是否是当前环境是pc还是手机

 var flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      if (flag) { // 手机端
        this.isPc = false;
        this.isPhone = true;
      } else { // pc端
        this.isPc = true;
        this.isPhone = false;
      }

 

vue表格使用:key="Math.random()" 

后表格跳动的问题，把换Math.random()成数字就可以，这样就不用参与计算