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

Posted 2023-04-05 學點

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

<!-- 编辑表单 -->
<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,//立即执行
      ,
    

vue之element中el-dialog关闭相关属性

在el-dialog中加入这俩属性：

:close-on-press-escape="false" :close-on-click-modal="false"

效果：键盘按Esc键，或者鼠标点击dialog外面， dialog都不会关闭了。

 

 

PS：

Vue中属性有无冒号的区别：

加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串字面量！

尤其是Boolean类型的容易混淆。例如上面dialog例子，带冒号表示后面属性是Boolean，否则只是单纯的字符串。