解决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父组件调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于Vue3中unref详解与常见使用的相关资料,Vue3中的unref是一个实用工具,用于简化访问响应式引用和普通值的过程,通过自动判断类型,unref可以处理任何类型的值,从而使代码更加简洁和易读,需要的朋友可以参考下2024-11-11
Element-ui DatePicker显示周数的方法示例
这篇文章主要介绍了Element-ui DatePicker显示周数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue cli 3.0 搭建项目的图文教程，本文通过图片文字相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了vue+php实现的微博留言功能,结合完整实例形式分析了vue.js前台留言及后台php交互功能相关操作技巧,需要的朋友可以参考下2019-03-03
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML，且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板，请记住这点。2016-09-09
这篇文章主要介绍了vue如何解决空格和空行报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了创建Vue项目以及引入Iview的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要为大家详细介绍了如何使用Vue3实现HTML内容预览功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
这篇文章主要介绍了浅谈vue项目用到的mock数据接口的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了Vue事件符.capture的含义及用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
最新评论