解决vue父组件调用子组件只执行一次问题
更新时间：2023年09月02日 10:41:03 作者：00后整顿职场
开发中,需求是将内容展示作为一个组件,输入为contentId,请求在组件中,只需根据父组件传过来的contentId去请求内容的详情即可,但是过程中却发现一个问题,父组件调用子组件只执行一次,所以本文就给大家介绍解决vue父组件调用子组件只执行一次问题
一、问题
开发中，需求是将内容展示作为一个组件，输入为contentId，请求在组件中，只需根据父组件传过来的contentId去请求内容的详情即可。但是过程中却发现一个问题，第一次打开弹框，展示内容没问题，但是接下来的多次点击发现一直是第一次请求的数据，也就是说，内容详情并未再次发生改变。
二、原因
在父组件中引用的子组件标签上添加属性，来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点，如果我们这一次和上一次传过去的属性值一样的话，watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行)，导致对应的数据也没有变化。created() 生命周期函数也是只执行一次。但是有时候我们需要这个组件每次都重新生成dom 元素，每次都执行created() 函数。这时候就用到了vue中的key 属性。
三、解决方案
<template>
<div>
<div>
<h1>父级</h1>
<button @click="handleLoad">点击重新加载子级</button>
</div>
<children :key="timer"></children>
</div>
</template>
<script>
import children from '@/components/parent/children'
export default {
name: 'parent',
components: { children },
data () {
return {
timer: ''
}
},
methods: {
handleLoad () {
this.timer = new Date().getTime()
}
}
}
</script>总结：
其实解决问题的本质只要可以让弹框这个dom元素每次打开重新加载一次，就会解决。
只要是一个变量即可促使dom刷新，例如：v-if、v-show、当前时间戳、或者在子组件使用watch监听
到此这篇关于解决vue父组件调用子组件只执行一次问题的文章就介绍到这了,更多相关vue父组件调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
this.$emit()的作用大家应该也都知道,主要用于子组件像父组件传值,这篇文章主要给大家介绍了关于vue中this.$emit使用方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
开发中经常会遇到跨组件通信的场景,props 逐层传递的方法实在是太不优雅了,所以今天总结下可以更加简单的跨组件通信的一些方法,文中通过代码实例讲解的非常详细,需要的朋友可以参考下2023-11-11
v-for循环遍历数据,永远不要把v-if和v-for同时用在同一个元素上,下面这篇文章主要给大家介绍了关于如何通过一文带你详细了解Vue中v-for的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue axios 跨域请求无法带上cookie的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了vue 监听变量值的实时变动 watch,使用字符串形式的侦听器函数,还有一种是使用函数形式的侦听器函数,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2023-08-08
详解Element-ui NavMenu子菜单使用递归生成时使用报错
这篇文章主要介绍了详解Element-ui NavMenu子菜单使用递归生成时使用报错，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue简单封装axios插件和接口的统一管理操作,结合具体实例形式分析了vue中axios插件安装、配置及接口统一管理具体操作技巧,需要的朋友可以参考下2020-02-02
Vue + Element UI 实现权限管理系统之菜单功能实现代码
菜单管理是一个对菜单树结构的增删改查操作，这篇文章主要介绍了Vue + Element UI 实现权限管理系统之菜单功能实现代码,需要的朋友可以参考下2022-02-02
本篇文章主要介绍了vue2父组件传递props异步数据到子组件的问题，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue如何根据条件判断按钮是否可以点击，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论