解决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父组件调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
PDF文件在线预览的功能相信大家都是有遇到过的,下面这篇文章主要给大家介绍了关于vue3如何实现PDF文件在线预览功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
在现代前端开发中,Markdown作为一种轻量级的文本标记语言,越来越受到开发者和内容创作者的青睐,本文我们就来使用Vue.js构建一个简单的Markdown编辑器吧2025-02-02
这篇文章主要介绍了VUE项目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正则和element ui写法，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Vue无限滑动周选择日期的组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了vue实现列表左右联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
methods是如何绑定this的 methods绑定上下文执行环境是通过bind来进行的呢,本文给大家介绍Vue中methods实现原理是什么,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要为大家详细为大家详细介绍了Vuejs实现带样式的单文件组件的新方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了vueJs实现DOM加载完成之后自动下拉到底部的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了VUEX 使用 mutations的两种方式,实现方式就是利用vuex中的mutations，在mutations中定义一个方法，这个方法就是把点击的index（也就是每个列表的唯一标识），传给state中的当前标识，需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了vue实现自动滑动轮播图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论