element Drawer 抽屉里面嵌入子组件，子组件中图片无法回显

问题描述

el-drawer里面嵌入子组件factoryForm先打开el-drawer之后才能拿到子组件factoryForm的ref即factoryForm，这个时候子组件factoryForm里面需要回填el-upload里面已经上传的图片，此时图片无法回填

html

el-drawer里面嵌入子组件factoryForm

 <el-drawer ref="drawer" :show-close="false" :title="drawer.title" :visible.sync="drawer.show" destroy-on-close size="80%">
      <div style="padding: 0 20px;">
        <div class="drawer_button">
          <el-button size="medium" icon="el-icon-close" circle @click="$refs.drawer.closeDrawer()" />
        </div>
        <!-- ref固定为这个名称 -->
        <!-- 注意，在drawer里面 factoryForm直接获取this 获取的是drawer的相关-->
        <factoryForm ref="factoryForm" :dict_qualifications_type="dict_qualifications_type" :sup_this="super_this" :is-add="false" />
      </div>
    </el-drawer>

js

// 先打开抽屉
 this.drawer = {
            show: true,
            title: '信息提示'
          }
         // 等待 factoryForm 组件渲染完毕再赋值，否则，会提示该组件找不到，即undefined
          this.$nextTick(() => {
            this.$refs.factoryForm.factoryFormData = res  // 为其子组件中factoryFormData赋值
          })

子组件factoryForm

data() {
   return {
       factoryFormData: {
        id: '',
        name: '',
        bUrls: '', // 图片一
        pUrls: '' // 图片二
      }
   }
}

解决方法

使用vue中的watch监听factoryFormData里面的这两个属性的变化，从而解决图片回显的问题

 watch: {
    // 监听对象factoryFormData里面的bUrls
    'factoryFormData.bUrls'(newValue, oldValue) {
      // 如果存在地址
      if (newValue) {
        // 路径拼接
        const path = this.baseUri + this.factoryFormData.bUrls
        this.backfillPicture(1, path) //  回显图片
        // 隐藏上传图片按钮
        this.upload.bl = true
      }
    },
    // 监听对象factoryFormData里面的pUrls
    'factoryFormData.pUrls'(newValue, oldValue) {
      if (newValue) {
        // 路径拼接
        const path = that.baseUri + that.factoryFormData.productionLicenseUrls
        this.backfillPicture(2, path)
        that.upload.pl = true
      }
    }
  },

关于图片的上传和回显具体可查看这篇文章
element中el-upload图片的上传与回显

知识延展

vue中关于对象的监听watch

对象属性的监听又分为两种方式，其一：普通的监听；其二：对象的监听
其中，对象的监听又分为两种，其一：对象整体的监听；其二：对象具体属性的监听
如下所示：

普通的监听

data() {
    return {
        msg: ''  // 要被监听的属性
    }
},
watch: {
//  newValue 新值  oldValue 旧值 
// 注意，若是直接写  msg(value) // 这里的value代表的是新值，即 newValue
    msg(newValue, oldValue) { 
        console.log(newValue)
    }
}

对象的监听

data() {
　　return {
　　　　person: {
　　　　　　name: 'Alice',
　　　　　　age: 18
　　　　}   
    }
},
这样的监听，则是只要该对象，即person里面任何属性的值发生变化，则都会被监测到
watch: {
　　person: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}

对象具体属性的监听

还是上面的data，改变的只是watch的监听，示例代码如下

data() {
　　return {
　　　　person: {
　　　　　　name: 'Alice',
　　　　　　age: 18
　　　　}   
    }
},
watch: {
// 对象中具体属性的watch直接用引号把属性引起来，就可以实现对象中特定属性的监听事件：
　　'person.name'(newValue, oldValue) {
　　　　console.log(newValue)
　　}