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