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ù)前就渲染了，子組件沒(méi)有監(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)聽(tīng)數(shù)組的變更不需要這么做?！?/li>
- 在父組件使用v-if，當(dāng)請(qǐng)求結(jié)束之后，改變v-if內(nèi)變量的值，加載子組件
- 使用vuex全局狀態(tài)管理，這個(gè)沒(méi)嘗試
上面三種方法的話：
- 第一種是最簡(jiǎn)潔明了的，但是昨天晚上第一種方法一直不成功，可能是語(yǔ)法寫(xiě)錯(cuò)了，今天早上上班試了一下才成功；
- 因?yàn)槲覀冏龅氖菙?shù)據(jù)展示，所以第二種就不適合我們的需求；
- 第三種的話我就沒(méi)試，網(wǎng)上的解決流程感覺(jué)太麻煩了；
這樣的話，其實(shí)昨天就沒(méi)解決這個(gè)問(wèn)題，下班回去的時(shí)候換了一個(gè)思路想了這個(gè)問(wèn)題，這個(gè)原因就是父組件異步請(qǐng)求沒(méi)有更新子組件的數(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)文章
分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例
本篇文章主要介紹了分享一個(gè)精簡(jiǎn)的vue.js 圖片lazyload插件實(shí)例。非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了深入淺出vue圖片路徑的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue2.0.js的多級(jí)聯(lián)動(dòng)選擇器實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue2.0.js的多級(jí)聯(lián)動(dòng)選擇器實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了詳解Vue2.0配置mint-ui踩過(guò)的那些坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
capture事件修飾符的作用是給元素添加一個(gè)監(jiān)聽(tīng)器，當(dāng)元素發(fā)生冒泡時(shí)，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧2017-12-12
vue項(xiàng)目多租戶環(huán)境變量的設(shè)置
本文主要介紹了vue項(xiàng)目多租戶環(huán)境變量的設(shè)置，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要介紹了vue router 配置路由的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-10-10
vue-drag-resize與輸入框/文本框沖突問(wèn)題
這篇文章主要介紹了vue-drag-resize與輸入框/文本框沖突問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
key屬性可以用來(lái)提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時(shí)候,并不會(huì)去改變?cè)械脑睾蛿?shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue使用Proxy代理后仍無(wú)法生效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11