解決vue父組件調用子組件只執(zhí)行一次問題
更新時間：2023年09月02日 10:41:03 作者：00后整頓職場
開發(fā)中,需求是將內容展示作為一個組件,輸入為contentId,請求在組件中,只需根據父組件傳過來的contentId去請求內容的詳情即可,但是過程中卻發(fā)現一個問題,父組件調用子組件只執(zhí)行一次,所以本文就給大家介紹解決vue父組件調用子組件只執(zhí)行一次問題
一、問題
開發(fā)中，需求是將內容展示作為一個組件，輸入為contentId，請求在組件中，只需根據父組件傳過來的contentId去請求內容的詳情即可。但是過程中卻發(fā)現一個問題，第一次打開彈框，展示內容沒問題，但是接下來的多次點擊發(fā)現一直是第一次請求的數據，也就是說，內容詳情并未再次發(fā)生改變。
二、原因
在父組件中引用的子組件標簽上添加屬性，來渲染可以擁有不同數據的子組件。但是vue 的組件有個特點，如果我們這一次和上一次傳過去的屬性值一樣的話，watch 監(jiān)聽的屬性因為沒有新的變化(這次的值和上一次的值一樣watch 中調用的函數不執(zhí)行)，導致對應的數據也沒有變化。created() 生命周期函數也是只執(zhí)行一次。但是有時候我們需要這個組件每次都重新生成dom 元素，每次都執(zhí)行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監(jiān)聽
到此這篇關于解決vue父組件調用子組件只執(zhí)行一次問題的文章就介紹到這了,更多相關vue父組件調用子組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于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
這篇文章主要介紹了創(chuàng)建Vue項目以及引入Iview的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細介紹了如何使用Vue3實現HTML內容預覽功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-03-03
這篇文章主要介紹了淺談vue項目用到的mock數據接口的兩種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06