vue 解决mounted不重加载子组件问题

最新推荐文章于 2024-08-16 19:49:10 发布
最新推荐文章于 2024-08-16 19:49:10 发布
阅读量3.7k 收藏
点赞数
分类专栏： 前端 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41973410/article/details/102917755
版权

有时需要在父组件中重复加载同一个子组件，但会出现子组件不重新加载的问题。
解决方法：在子组件外加一个div框住它：
在这里插入图片描述
这样，父组件的数据就可以在每次加载子组件的时候传入到子组件中

de_la_prada
关注
专栏目录
vue组件化组件同页面不刷新复用，数据不更新问题
weixin_52417514的博客
02-07 1006
使用key解决同页面复用组件，组件内部数据不更新问题
vue子组件mounted不执行_解决vue项目F5刷新mounted里的函数不执行问题
weixin_39602737的博客
12-19 5691
项目背景在主文件index.vue中初始化页面相关的操作，在mounted中放置用户权限判断并更新store中的权限值，当点击相应组件时mounted可正常工作，但是在用户手动刷新时mounted内的函数并未执行，导致相应组件未获取到权限而显示异常问题解决首先，这跟vue生命周期有关，图就不贴了，直接说原因。当用户f5刷新页面时，整个页面会重新去请求，js的状态变量消失，但是el节点并未重新建立。...
element组件库el-dialog里边包含子组件的mounted钩子只执行一次的解决办法
CaseyWei
08-17 2309
问题： 在Vue开发中，有时需要我在同一个页面或列表中，多次加载同一个组件，但问题来了。（例如使用：新增、编辑、详情，使用弹框组件时） 该组件只在页面加载中，加载一次，后面不会再加载了，如el-dialog 解决办法如下： 在组件标签中加v-if来控制组件el-dialog的出现与否,每次弹出el-dialog，都会执行mounted,而不加v-if只会执行一次生命周期钩子函数。 实例： <el-dialog title="" width="40%" :visible.sync="dial
Vue.js 中的 mounted 生命周期钩子：2 万字深度解析
最新发布
weixin_63490470的博客
08-16 1183
mounted生命周期钩子是在 Vue 组件实例完成挂载后触发的回调函数。所谓挂载，指的是将组件的模板编译成真实的 DOM 元素，并将其插入到页面中。1.1mounted的触发时机当 Vue 实例完成挂载，将模板编译成真实的 DOM 元素并插入到页面中后，mounted钩子函数就会被调用。此时，组件的$el属性已经指向组件的根 DOM 元素，我们可以通过$el属性访问和操作 DOM 元素。1.2mounted的作用在mounted。
el-dialog不执行mounted
weixin_43988238的博客
08-05 924
el-dialog不执行mounted 1.一个页面用表格展示数据，点击新增可以增一条数据，这种情况一般就是弹窗里面有表单 2.每次进展示页面发现都会调用表单的初始化方法，向后台请求数据，我就觉得奇怪，然后我新增完后，在展示页面点击编辑发现弹窗就不初始化，就只加载一次 3.解决方法： 父组件： <div v-if="isRegister"> <training_form></training_form> </div> 在子组件外面加一层，
打开弹框el-dialog，子组件里面mounted第二次不触发
小武人生
02-21 3405
最近做一个功能，弹框第一次打开可以正常，第二次就无法加载里面的内容 父子页面 子页面mounted无法加载 找了很多种方法，自己觉得代码少，并且很管用的方法 加一个 v-if，虽然功能和： visible.sync 一样，但是原理不一样 v-if控制元素的存在与否 :visible.sync控制el-dialog的显示，当我们退出弹窗时会销毁子组件的变量，实现子组件初始化，下次进入就不会携带上次输入的信息了 <el-dialog :visible.sync="detailShadow"
Vue2 中重新加载组件的方法
weixin_50828774的博客
09-25 1673
Vue如何实现当前组件重新加载
vue 路由子组件created和mounted不起作用的解决方法
12-30
判断项目是否启用keep-alive...使用exclude排除组件(我没有成功不知道为什么) <router></router> 使用v-if判断(成功解决) !$route.meta.noKeepAlive> <router></router> $route.meta.noKeepAlive></router-vi
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
10-15
- 解决子组件不重加载的问题，通过外部div包裹子组件，并利用数据绑定机制更新子组件数据。 这些方法在实际开发过程中都是可行的，可以根据具体需求和场景选择合适的解决方案。通过合理的处理，可以有效避免因资源...
解决vue项目F5刷新mounted里的函数不执行问题
10-16
将用户权限判断和更新Store的操作移动到`beforeMount`或`created`，可以确保它们在页面刷新后依然能正确执行，从而解决`mounted`中函数不执行的问题。同时，记得在调整代码时，要考虑到不同生命周期钩子中对数据和...
vue 子组件watch监听不到prop的解决
10-14
- 如果子组件的created生命周期钩子中依赖于prop的数据，需要考虑到数据可能未完全加载的情况，或者换用其他钩子，例如mounted钩子，该钩子在DOM渲染之后调用，数据加载一般在此之前完成。 - 使用Vue开发者工具进行...
vue-router中用'*'指定默认组件的时候不加载router-link-exact-active的问题
yuan5801551的博客
08-12 1673
vue-router中用’*'指定默认组件的时候不加载router-link-exact-active的问题 在vue-router中，我们想要定义默认主页，就可以使用’*'通配符： 优点:{ 1,可以解决404问题 2,可以定义默认页面 } 缺点：{ 1,给页面带来未知的隐患 } router-link-exact-active，关于这个我们知道，在vue-router中这个是可以直接使用而不用...
使用Vue时不进mounted 方法
weixin_44087528的博客
05-13 3883
我在使用Vue时出现了一个错误，在mounted方法中alert()，console.log()不出任何数据 是因为我的放错了位置 如果出现了相同的错误，大家可以注意下这个问题 ...
JavaScript(四)：DOM、BOM、事件处理、对象与原型
算云烟
12-07 684
一、DOM 1. DOM简介 ​ Document Object Model 文档对象模型 ​ 浏览器加载HTML文档时，会将HTML文档解析为一个树形结构，称为DOM树 HTML文档和DOM树是一一对应的关系 当DOM树被改变时，与之对应的HTML文档也会随之改变 当需要对HTML中的内容进行动态改变时，可以使用DOM来进行操作 DOM提供了一组用来操作HTML文档的API，即提供一套属性、方法和事件 树上的每一个节点都是一个DOM对象，树的顶层为document对象，表示整个文档 2. 查询操作
vue2.0处理组件循环引用
u012270755的专栏
04-18 562
vue组件循环引用
vue 加载时掉用mounted_vue mounted 调用两次的完美解决办法
weixin_39585378的博客
12-19 1982
在开发中发现其中一个页面moutned调用了两次，而其他页面正常，表示很懵逼，然后查找原因，终于找到了，其实归根到底是要知道mounted的调用机制问题；情况：在这个页面中出现了mounted 加载了两次的情况；方法：排除法首先把 this.$store.commit()方法注释掉，发现就好了，只加载一次初步判断是commit 方法导致的二 验证判断是否正确，不使用commit 方法，该用直接...
解决vue 路由子组件created和mounted不起作用问题
热门推荐
洋洋洒洒做开发的专栏
12-12 1万+
解决vue 路由子组件created和mounted不起作用问题判断项目是否启用`keep-alive`启用未启用 判断项目是否启用keep-alive 启用 使用exclude排除组件(我没有成功不知道为什么)&amp;lt;keep-alive exclude=&quot;needExcludeComponentName&quot;&amp;gt; &amp;lt;router-view&amp;gt;&amp;lt;/router-
vue 加载时掉用mounted_vue 页面回退mounted函数不执行的问题及解决方法
weixin_39531037的博客
12-19 2330
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created...
Android项目入口页面设置
2401_84446919的博客
04-28 531
项目中：AndroidManifest.xml中此段代码 放置在哪个activity标签中 则哪个activity为入口。11，transform、translate、transition 分别是什么属性？14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,6，DOM 事件有哪些阶段？5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。2，如何实现一个最大的正方形。3，一行水平居中，多行居左。1，判断 js 类型的方式。
vue 父组件调用子组件时子组件自动加载方法
11-24
在Vue中，父组件可以通过`ref`属性获取子组件的实例，然后调用子组件的方法。如果需要在子组件加载时自动调用某个方法，可以使用Vue的生命周期函数`mounted`。当子组件被挂载到DOM上后，`mounted`函数会被自动调用。下面是一个示例代码： 父组件： ```html <template> <div> <ChildComponent ref="child"></ChildComponent> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, mounted() { this.$refs.child.childInfo() } } </script> ``` 子组件： ```html <template> <div> <p>{{ message }}</p> </div> </template> <script> import { defineExpose } from 'vue' export default { data() { return { message: 'Hello from ChildComponent!' } }, methods: { childInfo() { console.log('ChildComponent method called!') } }, mounted() { console.log('ChildComponent mounted!') } } defineExpose({ childInfo: () => { console.log('ChildComponent method exposed!') } }) </script> ``` 在父组件中，我们使用`ref`属性获取子组件的实例，并在`mounted`函数中调用子组件的`childInfo`方法。在子组件中，我们使用`defineExpose`函数将`childInfo`方法暴露出去，以便父组件可以调用。同时，在子组件的`mounted`函数中，我们可以看到控制台输出了`ChildComponent mounted!`，表示子组件已经被挂载到DOM上了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值