Vue dialog在打开前加载dialog里的内容

Posted 2023-05-07

参考技术A 原文地址

为解决dialog在首次打开时数据或组件没有加载的问题 这里使用一种简单粗暴的方法

dialog加载的依据是dialog的属性rendered（v-if="rendered"）决定的，所以需要将rendered改为true,但有时会不生效 所以在前后分别打开和关闭dialog就可以了。 

VUE+Element首次打开Dialog加载子组件数据未渲染（不显示）

第一次打开弹窗组件时，父组件传给子组件的数据在视图中未显示，第二次以后再打开就可以显示

<!-- 编辑表单 -->
<el-dialog :visible.sync="fromDialogVisible" class="dialog" 
  :before-close="handleFromClose">
  <!-- edit-warpper margin-center -->
  <form-module ref="clickResetForm" :dataForm="dataForm"
    :valueForm="valueForm" :typeForm="typeForm"
    @childrenForm="parentForm" @dialogVisibleToggle="dialogVisibleToggle"/>
</el-dialog>

原因一：当弹窗组件里面包裹子组件时候，第一次渲染子组件数据未渲染，子组件接收到的是undifined

解决方法：在弹窗为true后用this.$nextTick来更新

this.fromDialogVisible = true;
this.$nextTick(() => 
  (this as any).$refs.clickResetForm.resetForm();
  this.valueForm = this.formData;
);

PS：在检查代码的时候可能你会发现自己已经用上了this.$nextTick还是不行，请检查使用this.$nextTick的位置，有可能是在弹窗为true前用的this.$nextTick

原因二：当弹窗组件里面包裹子组件时候，第一次渲染子组件数据未渲染，子组件组件已经接收到了数据，但依然未显示，接收到数据未渲染到视图（数据动态变化的，可能是因为数据在变化后未进行双向绑定或者父组件传给子组件的数据未赋值给子组件双向绑定的数据源）

解决办法：在子组件中使用$watch()监听父组件传给子组件的数据一旦发生变化，就调用引号里的方法，从而达到change事件监听的效果，在监听到数据变化时进行数据赋值（双向绑定）或者其他动作

watch是一个对象，按照对象的键值对格式要使用

watch的三个对象

• handler：其值是一个回调函数。即监听到变化时应该执行的函数。
• deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
• immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

子组件代码示例：

<el-form ref="form" :model="form" label-width="80px" class="form-module">
  <!-- 表单代码 -->
  ...
</el-form>

export default 
  name: "formModule",
  props: [
    "valueForm",
  ],
  data() 
    return 
      form: ,
    ;
  ,
  watch: 
    valueForm: 
      handler() 
          this.form = this.valueForm;
      ,
      immediate: true,//立即执行
      ,