Vue.js parent 不要将更新的数据发送到 child
Vue.js parent don't send updated data to child
我无法从 parent 更新 child 中的数据。 Parent 只发送初始数据,但如果我通过函数更新数据,那么我从 Back-end 获取它,没有任何改变。我什至制作了 wacher,它可以工作然后数据更改(在控制台中写入调试字)但仍然没有发送更新的数据。我应该如何使用动态更改的数据从 parent 数据刷新 child?
Parent:
<el-date-picker
v-model="reportMonth"
type="month"
format="MMMM yyyy"
value-format="yyyy-MM-dd"
placeholder="Choose month"
@change="generateReport">
</el-date-picker>
<bar-chart :parent-data="sendData"></bar-chart>
data() {
return {
monthData: null,
sendData: {
lowRiskPreliminary: 0,
midRiskPreliminary: 0,
highRiskPreliminary: 0,
inadmissibleRiskPreliminary: 0,
notValidPreliminary: 0
}
watch: {
monthData: function() {
console.log('data changed!')
this.sendData = this.monthData
}
},
methods: {
generateReport() {
this.listLoading = true
getMonthlyReport(this.reportMonth).then(response => {
this.monthData = response.data }
Child:
<template>
<div :class="className" :style="{height:height,width:width}"></div>
</template>
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
parentData: {
type: Object,
default: undefined
}
},
data() {
return {
chart: null,
lowRisk: [this.parentData.lowRiskPreliminary],
midRisk: [this.parentData.midRiskPreliminary],
highRisk: [this.parentData.highRiskPreliminary],
inhRish: [this.parentData.inadmissibleRiskPreliminary],
notVal: [this.parentData.notValidPreliminary]
}
},
mounted() {
this.initChart()
methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.chart.setOption({
像这样在子模板中打印 sendData {{ sendData }},您应该会看到它发生了变化。
您将原始值 undefined
作为 parent 数据的默认值,并在更新 parent 变量后将其更改为 object。查看更多关于 VueJS 中的反应性和注意事项:
https://vuejs.org/v2/guide/reactivity.html
使用$nextTick
:
watch: {
monthData: function() {
this.$nextTick(function () {
this.sendData = this.monthData
})
}
}
或使用 $emit,从 parent 发出事件:
watch: {
monthData: function() {
this.$emit('monthDataUpdated', this.monthData);
}
}
并在 child 中:
events: {
'monthDataUpdated' : function(data){
this.$nextTick(function () {
this.parentData = data;
});
},
}
我无法从 parent 更新 child 中的数据。 Parent 只发送初始数据,但如果我通过函数更新数据,那么我从 Back-end 获取它,没有任何改变。我什至制作了 wacher,它可以工作然后数据更改(在控制台中写入调试字)但仍然没有发送更新的数据。我应该如何使用动态更改的数据从 parent 数据刷新 child?
Parent:
<el-date-picker
v-model="reportMonth"
type="month"
format="MMMM yyyy"
value-format="yyyy-MM-dd"
placeholder="Choose month"
@change="generateReport">
</el-date-picker>
<bar-chart :parent-data="sendData"></bar-chart>
data() {
return {
monthData: null,
sendData: {
lowRiskPreliminary: 0,
midRiskPreliminary: 0,
highRiskPreliminary: 0,
inadmissibleRiskPreliminary: 0,
notValidPreliminary: 0
}
watch: {
monthData: function() {
console.log('data changed!')
this.sendData = this.monthData
}
},
methods: {
generateReport() {
this.listLoading = true
getMonthlyReport(this.reportMonth).then(response => {
this.monthData = response.data }
Child:
<template>
<div :class="className" :style="{height:height,width:width}"></div>
</template>
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
},
parentData: {
type: Object,
default: undefined
}
},
data() {
return {
chart: null,
lowRisk: [this.parentData.lowRiskPreliminary],
midRisk: [this.parentData.midRiskPreliminary],
highRisk: [this.parentData.highRiskPreliminary],
inhRish: [this.parentData.inadmissibleRiskPreliminary],
notVal: [this.parentData.notValidPreliminary]
}
},
mounted() {
this.initChart()
methods: {
initChart() {
this.chart = echarts.init(this.$el)
this.chart.setOption({
像这样在子模板中打印 sendData {{ sendData }},您应该会看到它发生了变化。
您将原始值 undefined
作为 parent 数据的默认值,并在更新 parent 变量后将其更改为 object。查看更多关于 VueJS 中的反应性和注意事项:
https://vuejs.org/v2/guide/reactivity.html
使用$nextTick
:
watch: {
monthData: function() {
this.$nextTick(function () {
this.sendData = this.monthData
})
}
}
或使用 $emit,从 parent 发出事件:
watch: {
monthData: function() {
this.$emit('monthDataUpdated', this.monthData);
}
}
并在 child 中:
events: {
'monthDataUpdated' : function(data){
this.$nextTick(function () {
this.parentData = data;
});
},
}