『VUE』elementUI dialog的子组件created生命周期不刷新(详细图文注释)

目录


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

主要是在做表单的时候想要有一个编辑表单在dialog弹窗中出现,同时dialog调用的封装的表单组件,在created的生命周期中赋值传入的表单当前初始值,排查了一下午发现created中初始化初始值只有首次打开表单生效.

1. 测试代码

测试代码,其中的HelloWorld是vue项目新建时默认的组件

html 复制代码
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  created() {
    console.log('created')
    alert(this.msg)
  }
}
</script>
<style scoped>

</style>

app.vue

html 复制代码
<template>
  <div id="app">
    <button @click="showComponent = !showComponent">{{ showComponent ? 'Hide' : 'Show' }}</button>
    <el-dialog
        title="提示"
        :visible.sync="showComponent"
        width="30%">
      <span>这是一段信息</span>
      <HelloWorld msg="dialog"/>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <div v-show="showComponent">
      <HelloWorld msg="v-show"/>
    </div>
    <div v-if="showComponent">
      <HelloWorld msg="v-if"/>
    </div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data() {
    return {
      showComponent: true
    }
  }
}
</script>

<style>

</style>

分析

令人迷惑的效果

理论上应该有3个弹窗,分别提示是通过v-if / v-show / dialog 的生命周期触发的,在你页面首次加载的时候确实是这样的

之后你通过点击show按钮控制各个组件的显示隐藏,发现只有v-if 的弹窗了

分析原因

v-if 和 v-show 的区别

  • v-if
    渲染行为:当条件为真时,v-if 会在 DOM 中添加或移除元素。条件为假时,相关的 DOM 元素会被完全销毁。
    性能:在初次渲染时,v-if 会引入额外的开销,因为每次切换条件时,元素需要被创建或销毁。
    使用场景:适用于需要频繁切换的状态较少的情况,或者在初次渲染时不需要显示的内容。
    示例:
html 复制代码
<div v-if="isVisible">这段内容只在 isVisible 为 true 时显示</div>
  • v-show
    渲染行为:v-show 始终会渲染元素,但会通过设置 CSS 的 display 属性来控制元素的可见性。条件为假时,元素的 display 属性会被设置为 none。
    性能:由于元素始终存在于 DOM 中,切换条件时性能开销较小,但在初次渲染时会增加一定的负担。
    使用场景:适用于频繁切换显示状态的情况,特别是需要快速响应用户交互时。
    示例:
html 复制代码
<div v-show="isVisible">这段内容始终存在于 DOM 中,但根据 isVisible 的值显示或隐藏</div>

所以本质上v-show 的子组件没有销毁掉,不会反复触发created的生命周期,我感觉elementUI的dialog可能也是类似v-show,但是没有细看代码,有时间看看.


解决方法 如何在dialog中反复触发created呢?

我暂时的思路是v-if子组件,把 <HelloWorld msg="dialog"/>变成了 <HelloWorld v-if="showComponent" msg="dialog"/>,通过v-if强制销毁子组件从而多次出发created

评论区的各位同仁也可以说说有没有更好的方法.

html 复制代码
    <el-dialog
        title="提示"
        :visible.sync="showComponent"
        width="30%">
      <span>这是一段信息</span>
      <HelloWorld v-if="showComponent" msg="dialog"/>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


相关推荐
还有多远.11 分钟前
jsBridge接入流程
前端·javascript·vue.js·react.js
w2sfot29 分钟前
Passing Arguments as an Object in JavaScript
开发语言·javascript·ecmascript
烛阴43 分钟前
【TS 设计模式完全指南】从零到一:掌握TypeScript建造者模式,让你的对象构建链式优雅
javascript·设计模式·typescript
前端Hardy1 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy1 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
无羡仙2 小时前
替代 Object.freeze 的精准只读模式
前端·javascript
半花2 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅2 小时前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js
用户28003832908402 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js
小菜全2 小时前
uniapp新增页面及跳转配置方法
开发语言·前端·javascript·vue.js·前端框架