VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問(wèn)題
更新時(shí)間：2023年10月24日 15:31:26 作者：修復(fù)BUG中
這篇文章主要介紹了VUE父組件異步獲取數(shù)據(jù),子組件接收的值為空的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
在vue中引用Echarts圖表，動(dòng)態(tài)渲染數(shù)據(jù)時(shí)一直不展示數(shù)據(jù)。
父組件異步請(qǐng)求獲取數(shù)據(jù)傳給子組件，子組件接收的打印的真實(shí)的值卻為初始值，如下所示
- 父組件
- 子組件
原因的話：
加載渲染的時(shí)候，請(qǐng)求是一個(gè)異步的操作，子組件在拿到數(shù)據(jù)前就渲染了，子組件沒有監(jiān)控到值得變化
父子組件加載渲染過(guò)程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
昨天晚上遇到這個(gè)問(wèn)題，在網(wǎng)上找了是下面三個(gè)方法：
- 在子組件用watch監(jiān)控父組件傳遞過(guò)來(lái)值得變化，設(shè)置deep：true【deep官方定義：為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定 deep: true。注意監(jiān)聽數(shù)組的變更不需要這么做。】
- 在父組件使用v-if，當(dāng)請(qǐng)求結(jié)束之后，改變v-if內(nèi)變量的值，加載子組件
- 使用vuex全局狀態(tài)管理，這個(gè)沒嘗試
上面三種方法的話：
- 第一種是最簡(jiǎn)潔明了的，但是昨天晚上第一種方法一直不成功，可能是語(yǔ)法寫錯(cuò)了，今天早上上班試了一下才成功；
- 因?yàn)槲覀冏龅氖菙?shù)據(jù)展示，所以第二種就不適合我們的需求；
- 第三種的話我就沒試，網(wǎng)上的解決流程感覺太麻煩了；
這樣的話，其實(shí)昨天就沒解決這個(gè)問(wèn)題，下班回去的時(shí)候換了一個(gè)思路想了這個(gè)問(wèn)題，這個(gè)原因就是父組件異步請(qǐng)求沒有更新子組件的數(shù)據(jù)值，其實(shí)我們可以手動(dòng)的更新子組件的值，在父組件異步請(qǐng)求拿到數(shù)據(jù)時(shí)，在成功回調(diào)賦值的時(shí)候，手動(dòng)的調(diào)用子組件的方法，并把數(shù)據(jù)當(dāng)成參數(shù)傳遞過(guò)去，子組件的處理就是在該方法內(nèi)手動(dòng)的刷新對(duì)象的，今天早上上班按照該思路，發(fā)現(xiàn)可以解決這個(gè)問(wèn)題。
下面就介紹一下vue父組件異步獲取數(shù)據(jù),子組件接收的值為空三種解決方法：
1.父組件異步獲取數(shù)據(jù),調(diào)用子組件方法重新賦值 【第二種方法不行，推薦使用該方法】
- 父組件
<template>
<div class="index">
//設(shè)置ref的值，下面調(diào)用
<ChartBasicLine :chartObj="chartRegUser" :ref="chartRegUser.type" />
</div>
</template>
<script>
import { getStatUser } from '@/api/data'
import ChartBasicLine from '@/components/Chart/ChartBasicLine'
export default {
components: {
ChartBasicLine
},
data() {
return {
chartRegUser: {
num: 0,
percent: '0.00%',
status: 0,
type: 'reg_user',
tips: '新增用戶',
title: '新增用戶(NU)',
link: '',
isShow: false,
xData: [],
yData: []
}
}
},
created() {
this.getStatUser()
},
methods: {
getStatUser() {
const _this = this
// 異步請(qǐng)求獲取數(shù)據(jù)
getStatUser().then(res => {
if (res.code === 0) {
// 賦值
_this.$set(_this.chartRegUser, 'xData', res.data['x_data'])
_this.$set(_this.chartRegUser, 'yData', res.data['y_data'])
// 這里是調(diào)用子組件的refresh的方法
_this.$refs[_this.chartRegUser.type].refresh(res.data)
}
})
}
}
}
</script>
- 子組件
<template>
<div class="ChartBasicLine">
<div
:ref="chartObj.type"
class="chart_show"
/>
</div>
</template>
<script>
export default {
name: 'ChartBasicLine',
props: {
chartObj: {
type: Object
}
},
data() {
return {
option: {
tooltip: {
trigger: 'axis'
},
grid: {
top: '22px',
left: '40px',
right: '30px'
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [{
type: 'line'
}]
},
myChart: {}
}
},
mounted() {
this.showChart()
},
methods: {
showChart() {
this.myChart = this.$echarts.init(this.$refs[this.chartObj.type])
this.option.xAxis['data'] = this.chartObj.xData
this.option.series[0]['data'] = this.chartObj.yData
this.myChart.setOption(this.option)
},
/**
* 父組件給圖表信息重新賦值，并重新刷新圖表
*/
refresh(data) {
this.option.xAxis['data'] = data['x_data']
this.option.series[0]['data'] = data['y_data']
this.myChart.setOption(this.option)
}
}
}
</script>
<style>
.ChartBasicLine .el-input {
margin-right: 0 !important;
}
</style>
2.子組件內(nèi)使用watch監(jiān)控對(duì)象值變化時(shí)重新賦值【推薦】
- 子組件
<template>
<div class="ChartBasicLine">
<div
:ref="chartObj.type"
class="chart_show"
/>
</div>
</template>
<script>
export default {
name: 'ChartBasicLine',
props: {
chartObj: {
type: Object
}
},
data() {
return {
option: {
tooltip: {
trigger: 'axis'
},
grid: {
top: '22px',
left: '40px',
right: '30px'
},
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [{
type: 'line'
}]
},
myChart: {}
}
},
watch: {
chartObj: { // 監(jiān)控該變量，重新賦值并刷新圖表
handler(newVal, oldVal) {
this.chartObj = newVal
this.showChart()
},
deep: true // 必須設(shè)置
}
},
mounted() {
this.showChart()
},
methods: {
showChart() {
this.myChart = this.$echarts.init(this.$refs[this.chartObj.type])
this.option.xAxis['data'] = this.chartObj.xData
this.option.series[0]['data'] = this.chartObj.yData
this.myChart.setOption(this.option)
}
}
}
</script>
3.父組件內(nèi)使用v-if渲染子組件【不推薦】
- 父組件
<template>
<div class="index">
// 通過(guò)v-if來(lái)控制子組件顯示
<ChartBasicLine v-if="isShow" />
</div>
</template>
<script>
import { getStatUser } from '@/api/data'
import ChartBasicLine from '@/components/Chart/ChartBasicLine'
export default {
components: {
ChartBasicLine
},
data() {
return {
chartRegUser: {
num: 0,
percent: '0.00%',
status: 0,
type: 'reg_user',
tips: '新增用戶',
title: '新增用戶(NU)',
link: '',
isShow: false,
xData: [],
yData: []
},
isShow: false // 控制子組件是否展示
}
},
created() {
this.getStatUser()
},
methods: {
getStatUser() {
const _this = this
getStatUser().then(res => {
if (res.code === 0) {
_this.$set(_this.chartRegUser, 'xData', res.data['x_data'])
_this.$set(_this.chartRegUser, 'yData', res.data['y_data'])
// 異步請(qǐng)求獲取數(shù)據(jù)，展示子組件
_this.isShow = true
}
})
}
}
}
</script>VUE中數(shù)組賦空值注意事項(xiàng)
在js或者Vue中，給數(shù)組賦空值不可以直接賦空值，例如：
var list = {a:'12',b:'34'};// 創(chuàng)建一個(gè)數(shù)組
list = [];// 數(shù)組賦空值否則會(huì)在再次賦值的時(shí)候報(bào)錯(cuò)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例
今天小編大家分享一篇vue2.0 可折疊列表 v-for循環(huán)展示的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列
這篇文章主要為大家詳細(xì)介紹了vue+elemet實(shí)現(xiàn)表格手動(dòng)合并行列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
計(jì)算屬性就是模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。這篇文章主要介紹了vue計(jì)算屬性詳解,需要的朋友可以參考下2018-04-04
Vuejs 2.0 子組件訪問(wèn)/調(diào)用父組件的方法(示例代碼)
這篇文章主要介紹了Vuejs 2.0 子組件訪問(wèn)/調(diào)用父組件的方法(示例代碼),需要的朋友可以參考下2018-02-02
SVG（Scalable?Vector?Graphics）可縮放矢量圖形，是一種用于描述基于二維的矢量圖形的?XML?標(biāo)記語(yǔ)言，其基本矢量顯示對(duì)象包括矩形、圓、橢圓、多邊形、直線、任意曲線等，還能顯示文字對(duì)象和嵌入式外部圖像2023-02-02
vue 關(guān)閉瀏覽器窗口的時(shí)候,清空l(shuí)ocalStorage的數(shù)據(jù)示例
今天小編就為大家分享一篇vue 關(guān)閉瀏覽器窗口的時(shí)候,清空l(shuí)ocalStorage的數(shù)據(jù)示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
electron-builder打包vue2項(xiàng)目問(wèn)題總結(jié)
這篇文章主要介紹了electron-builder打包vue2項(xiàng)目問(wèn)題總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
這篇文章主要為大家詳細(xì)介紹了用Vue封裝導(dǎo)航欄組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue封裝組件并上傳到npm的相關(guān)教程,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考下2024-04-04
這篇文章主要介紹了Vue3中實(shí)現(xiàn)瀑布流的兩種主要方案：CSS原生方案和JS計(jì)算方案,CSS方案適用于靜態(tài)短列表,而JS方案適用于長(zhǎng)列表和復(fù)雜布局,能夠保證排序正常并支持懶加載,文章詳細(xì)介紹了兩種方案的實(shí)現(xiàn)步驟,需要的朋友可以參考下2025-12-12