vue杂项用法$set,$ref,Promise用法,动态加载componets子组件,$attrs

一 有时候给页面上一个对象的属性赋值的时候，虽然数据改变了，但是页面并没有展示刷新数据，可以如下处理

row.agreeRatio = 'sdfsd'---本句是无效的
---可以使用如下语句
        this.$set(row, 'agreeRatio', 'sdfsd')

二 $refs三种用法

1获取dom节点
此时会打印出div的信息

 <div style="width:100px;height:100px" ref="test"></div>
   mounted() {
    console.log(this.$refs.test)
  },

1-2 this.$refs[‘formReg’].validate(valid => {
flagInfo = flagInfo && valid
})

1-3 this.$refs.file.fileUploadList

2 用在componets 钩子中时，获取子节点中的值,会打印出子页面tn的值

<child:registId="registId" @reloadList="reloadList" :timeStamp="timeStamp"  ref="test"></child>
   mounted() {
    console.log(this.$refs.test.tn)
  },

child文件

data() {
    return {
      tn:'sd'
      }
      }

3 当ref中为变量时，可以用中括号，如在data中定义 componentId，然后就是this.$refs[this.componentId].validiteBeforeSubmit()
定义为：

<component :is="componentId" :ref="componentId" :id="formId" :rowId="row.businessKey" :tableName="tableName" :readOnly="readOnly"
            :selfParam="selfParam" :timeStamp="timeStamp"></component>

三 $nextTick 数据改变后先获取改变的数据再渲染dom

(本段是抄的)
假设我们更改了某个 dom 元素内部的文本，而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的，
this.$nextTick这个方法作用是，当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来

methods：{
    testClick() {
        this.content = '改变了的值'
        this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            console.log(this.$refs.tar.innerText) // 改变了的值
        })
    }
}

Promise用法

resolve表示成功时的回调，会在父页面的then中捕获，reject表示失败时的回调，会在父页面的catch中捕获
用于父子页面等待方法执行完再返回，如父页面调用子页面后台方法，等子页面后台调用完再返回
父页面

  //提交前进行必填校验
    validiteBeforeSubmit(){
      return new Promise((resolve, reject)=>{
        if (this.meetingStatus === '4'|| this.meetingStatus === '5'){
          //登记校验
          this.$refs.registChild.validateBeforeWorkFlowSub().then(res=>{
            resolve('success')
          }).catch(e=>{reject(e) })

        }else if(this.meetingStatus === '6'){//议案表决时需要校验保存结果
          //议案表决，校验结果是否保存
          this.resolve = resolve
          this.reject = reject
          this.findVoterResult()
        }else{
          resolve('success')
        }

      })

    }

子页面

    validateBeforeWorkFlowSub(){
      return new Promise((resolve, reject)=>{
        validateShouldAttender(this.noticeId).then(response => {
          if(response.data === null || response.data.length === 0){
            reject('请填写完整信息后进行保存')
          }else{
            resolve('success')
          }
        })
      })

    }

动态加载componets子组件

方式一

 import Vue from 'vue'
 let componentPath ='views/company/meeting/workFlowForm/metWorkFlowForm'
const componentName = 'selfTemplateName'
let componentPath = data.obj.eformUrl
Vue.component(
     componentName,
     require('@/' + componentPath + '.vue').default,
   ) 
 this.componentId = componentName    

页面中为

<component
              :is="componentId"
              :ref="componentId"
              :id="formId"
            ></component>

方式二，从网上抄的，没使用过

import Vue from 'vue'
// 自动导入components中的组件
const componentsContext = require.context('@/components', true, /index.vue$/)
componentsContext.keys().forEach((component) => {
  const componentConfig = componentsContext(component).default
  Vue.component(componentConfig.name, componentConfig)
})

引用自：https://blog.youkuaiyun.com/weixin_39808181/article/details/113809146

$attrs

父类传递参数，子类不在props接收的参数都能在 this.$ attr 中接收，如
父组件，传递了v-model和disable,子组件中props中如果不写明接收disable，则可以在this.$attr中接收

<InputSelectCombine
                  type="input"
                  v-model="form.bdqy"
                  @clickISC="stockListShowMulti('bdqy')"
                  @clearISC="form.bdqy=''"
                  :disabled="isDisabled"
                  style="width: 100%;"></InputSelectCombine>

子组件中大于attr