Vue父组件多次调用子组件，子组件数据不刷新三种解决方案

最新推荐文章于 2024-05-19 21:49:48 发布
最新推荐文章于 2024-05-19 21:49:48 发布
阅读量4.7k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36031730/article/details/107286963
版权
本文以ElementUi为例，介绍了Vue中解决父组件多次调用子组件但子组件数据不刷新的三种方法：1) 使用$nextTick在DOM更新后执行回调；2) 利用watch监听数据变化并响应；3) 通过computed属性实现数据计算和自动更新。
摘要由CSDN通过智能技术生成

以下示例使用ElementUi作为演示

第一种（$nextTick）

$nextTick将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上

//父组件
<template>
  <div>
    <el-table
      :data="tableData.slice(pagesize*(pagenum-1),pagenum*pagesize)"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
      fixed="right"
      label="操作"
      width="100">
      &l
最低0.47元/天 解锁文章
空袭的梦
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件化组件同页面不刷新复用，数据不更新问题
weixin_52417514的博客
02-07 944
使用key解决同页面复用组件，组件内部数据不更新问题
vue父子组件传值，父组件内容更新子组件内容不实时更新
G佳伟
09-05 9831
vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新
vue页面引用组件时，子组件接口返回数据正常，页面不刷新问题
Yangjie_iii的博客
09-30 1522
vue组件之间通讯
vue刷新页面，子组件数据丢失
最新发布
qq_61441003的博客
05-19 183
最近在写一个个人中心的界面，其中父组件包含了两个子组件，一个子组件用于头像显示和上传，另一个组件用于显示一些重要的个人信息，其他一些基本信息就显示在父组件中，问题来了，页面只要一刷新，两个子组件的数据就未空。时，由于这个初始化是在组件的 setup 函数中完成的，Vue 可能无法追踪到。经过测试，子组件中拿到的值确实是有效的。但是前端页面显示不出来。在父组件中，我通过向后面发送请求来获取数据，并传值给子组件。Vue 3 使用了依赖追踪系统来更新 DOM。
vue3子组件数据无法更新
m0_47020822的博客
10-12 5918
vue3父组件传值，子组件数据无法更新
导致VUE页面不刷新的几种情况以及解决方法
qq_30258721的博客
08-30 6733
参考文献 https://segmentfault.com/a/1190000022772025 1.Vue 无法检测实例被创建时不存在于 data 中的 property 原因：由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。 场景： var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{
【VUE】父组件点击后子组件页面内容不更新 :key=“timer“
SZnAl的博客
05-30 4113
父组件点击后，子组件页面内容不更新（参数已经传递，子组件并没有对新参数进行调用） 解决方法： 在父组件中： 需要更新的子组件中添加： <business-form-dialog-template @submit="receiveOrder"> <order-apply-form :key="timer"/> //添加key </business-form-dialog-template> 父组件的点击方法中添加： han
基于Vue框架vux组件库实现上拉刷新功能
08-28
在基于Vue框架的移动应用开发中，vux组件库是一个常用的选择，它提供了...在遇到问题时，及时检查组件状态和事件回调，通常可以找到解决方案。同时，熟悉vux提供的各种组件，能够帮助我们更高效地开发Vue.js应用程序。
VueScrollerVue下拉刷新及无限加载组件
08-12
VueScroller正是基于这些特性，为Vue开发者提供了一种简单且强大的解决方案，来实现列表的流畅滚动、下拉刷新以及自动加载更多内容的功能。 首先，我们来详细了解一下VueScroller的主要功能和工作原理： 1. **下拉...
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
1. **改用`this.$router.push`**：最简单且直接的解决方案是，在需要调用`router.push`的地方，确保你是在Vue组件的上下文中，这样可以使用`this.$router.push`，因为它会正确地触发视图的更新。 2. **全局挂载`...
Vue vant 上拉加载 下拉刷新实际案例源码模板
05-18
在这个模板中，父组件可能通过 props 传递必要的配置信息，如加载更多或刷新的API接口地址，而 hotweek.vue 组件则通过自定义事件通知父组件加载已完成。 6. **优化与性能**： 考虑到性能，你可能需要实现虚拟滚动...
Vue 中获取当前时间并实时刷新的实现代码
10-15
在Vue.js框架中，获取当前...这个示例提供了一个简洁而有效的解决方案，适用于多种需要实时显示时间的场景。希望这对你的学习或工作有所帮助，如果想了解更多相关知识，可以继续查阅其他文章或深入学习Vue.js的文档。
vue父组件数据更新后，子组件页面没刷新
2201_75783276的博客
06-20 2246
可以修改子组件绑定的key，这样子组件就会重新渲染 <view class="outerContainer" v-for="brandItem,brandIndex in goodsList" :key="brandItem.id" style="margin-bottom: 20rpx;"> <view class="brandTitle">{{brandItem.name}}</view> <view class="brandItem
vue 强制刷新子组件
Jana Jing的分享
07-05 5079
问题: 1)因为父组件有缓存等因素，子组件创建后没有释放，传入参数无效 2)父组件的tab切换, 导致子组件一直存在, 没有刷新 解决方法: 只要让子组件强制刷新就可以获取到props传递过来的值了, 使用v-if的特性（销毁和重建）可以强制刷新子组件 <template> <div> <child v-if="sonRefresh"></child> </div> </template> <scrip
vue 父子组件,页面内容不更新问题
weixin_47239395的博客
11-25 1064
vue 父子组件刷新页面/更新数据问题
vue 组件不刷新解决办法
chenfairy的博客
09-07 1593
vue 解决组件不刷新问题
看一遍你就能学会，解决vue父组件调用子组件只执行一次方法问题
总结前端开发中遇到的问题，分享前端知识
03-06 1021
父组件调用子组件方法，居然方法只执行一次，这是什么情况？这个方法简单有效，相信你看一遍就能学会。
vue —— 父组件同一时间多次调用子组件方法
Juliet_xmj的博客
12-23 2484
子组件方法 child.vue <div>{{msg}}</div> props: { msg: { type: String, default: '' } }, methods: { getData () { console.log(msg) } } 父组件 fa.vue 1.引入子组件 import child from './child' data () { return { list: [ { msg: 'hhhh', in
vue父组件调用子组件方法刷新子组件数据，子组件视图不更新如何处理
07-21
在Vue中，父组件调用子组件的方法刷新子组件数据时，子组件的视图不会自动更新。这是因为Vue的响应式系统无法检测到这种直接的数据变化。为了解决这个问题，你可以使用以下方法之一： 1. 使用Vue的事件机制：在子组件中，你可以定义一个自定义事件，并在父组件中监听该事件。当父组件需要刷新子组件数据时，可以通过触发该事件来实现。在子组件中，你可以在事件处理方法中更新数据，并通过Vue的强制更新机制来强制刷新子组件的视图。具体代码如下： ```javascript // 子组件 <template> <div> <!-- 子组件的视图 --> </div> </template> <script> export default { data() { return { // 子组件的数据 }; }, methods: { // 子组件的方法 refreshData() { // 刷新子组件的数据 this.$emit('refresh'); } } }; </script> // 父组件 <template> <div> <button @click="refreshChild">刷新子组件</button> <child-component @refresh="forceUpdateChild"></child-component> </div> </template> <script> export default { methods: { refreshChild() { // 调用子组件的刷新方法 this.$refs.child.refreshData(); }, forceUpdateChild() { // 强制更新子组件的视图 this.$refs.child.$forceUpdate(); } } }; </script> ``` 2. 使用Vue的`$refs`属性：父组件可以通过`$refs`属性引用子组件实例，并直接调用子组件的方法来刷新数据。然后，你可以通过Vue的强制更新机制来强制刷新子组件的视图。具体代码如下： ```javascript // 子组件 <template> <div> <!-- 子组件的视图 --> </div> </template> <script> export default { data() { return { // 子组件的数据 }; }, methods: { // 子组件的方法 refreshData() { // 刷新子组件的数据 } } }; </script> // 父组件 <template> <div> <button @click="refreshChild">刷新子组件</button> <child-component ref="child"></child-component> </div> </template> <script> export default { methods: { refreshChild() { // 调用子组件的刷新方法 this.$refs.child.refreshData(); // 强制更新子组件的视图 this.$nextTick(() => { this.$forceUpdate(); }); } } }; </script> ``` 上述方法中，都使用了Vue的强制更新机制`$forceUpdate()`来强制刷新子组件的视图。请根据你的具体情况选择其中一种方法来处理子组件数据更新后视图不更新的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

空袭的梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值