解決vue父組件調(diào)用子組件只執(zhí)行一次問題
一、問題
開發(fā)中，需求是將內(nèi)容展示作為一個組件，輸入為contentId，請求在組件中，只需根據(jù)父組件傳過來的contentId去請求內(nèi)容的詳情即可。但是過程中卻發(fā)現(xiàn)一個問題，第一次打開彈框，展示內(nèi)容沒問題，但是接下來的多次點擊發(fā)現(xiàn)一直是第一次請求的數(shù)據(jù)，也就是說，內(nèi)容詳情并未再次發(fā)生改變。
二、原因
在父組件中引用的子組件標簽上添加屬性，來渲染可以擁有不同數(shù)據(jù)的子組件。但是vue 的組件有個特點，如果我們這一次和上一次傳過去的屬性值一樣的話，watch 監(jiān)聽的屬性因為沒有新的變化(這次的值和上一次的值一樣watch 中調(diào)用的函數(shù)不執(zhí)行)，導(dǎo)致對應(yīng)的數(shù)據(jù)也沒有變化。created() 生命周期函數(shù)也是只執(zhí)行一次。但是有時候我們需要這個組件每次都重新生成dom 元素，每次都執(zhí)行created() 函數(shù)。這時候就用到了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>總結(jié)：
其實解決問題的本質(zhì)只要可以讓彈框這個dom元素每次打開重新加載一次，就會解決。
只要是一個變量即可促使dom刷新，例如：v-if、v-show、當前時間戳、或者在子組件使用watch監(jiān)聽
到此這篇關(guān)于解決vue父組件調(diào)用子組件只執(zhí)行一次問題的文章就介紹到這了,更多相關(guān)vue父組件調(diào)用子組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
PDF文件在線預(yù)覽的功能相信大家都是有遇到過的,下面這篇文章主要給大家介紹了關(guān)于vue3如何實現(xiàn)PDF文件在線預(yù)覽功能的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
在現(xiàn)代前端開發(fā)中,Markdown作為一種輕量級的文本標記語言,越來越受到開發(fā)者和內(nèi)容創(chuàng)作者的青睞,本文我們就來使用Vue.js構(gòu)建一個簡單的Markdown編輯器吧2025-02-02
這篇文章主要介紹了VUE項目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正則和element ui寫法，本文給大家講解的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue無限滑動周選擇日期的組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表左右聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
methods是如何綁定this的 methods綁定上下文執(zhí)行環(huán)境是通過bind來進行的呢,本文給大家介紹Vue中methods實現(xiàn)原理是什么,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細為大家詳細介紹了Vuejs實現(xiàn)帶樣式的單文件組件的新方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
vueJs實現(xiàn)DOM加載完之后自動下拉到底部的實例代碼
這篇文章主要介紹了vueJs實現(xiàn)DOM加載完成之后自動下拉到底部的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了VUEX?使用?mutations的兩種方式,實現(xiàn)方式就是利用vuex中的mutations，在mutations中定義一個方法，這個方法就是把點擊的index（也就是每個列表的唯一標識），傳給state中的當前標識，需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)自動滑動輪播圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03