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

最新推荐文章于 2024-02-22 01:50:35 发布

學點

最新推荐文章于 2024-02-22 01:50:35 发布

阅读量6.8k

点赞数 4

分类专栏：前端代码文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44542088/article/details/127886602

版权

前端代码专栏收录该内容

11 篇文章 1 订阅

订阅专栏

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

<!-- 编辑表单 -->
<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. $n e x t T i c k 还是不行，请检查使用 t h i s .$ 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,//立即执行
      },
    }
}