案例为父组件的时间选择框传值给子组件。
一、父组件中
1、父组件-index.vue: message-data和子组件传值,该值不能用驼峰命名,子组件用驼峰命名接收。
<BarChartTimeOut :message-data="barChartTimeOut"/>
如:<子组件BarChartTimeOut :message-data=“父组件需传的数据barChartTimeOut”/>
2、js
(1)import 导入子组件
import BarChartTimeOut from "./components/BarChartTimeOut";
(2) 子组件注入
components: {
BarChartTimeOut,
TablePeopleChart,
},
(3)return 中定义父组件需传的数据barChartTimeOut
(4)根据实际情况给父组件需传输的值赋值
二、子组件,是一个柱状图
名字为:barChartTimeOut.vue。messageData该项和父组件上面说明的一致,采用父组件的驼峰命名,如果只是单个单词,用该单词即可。
1、props中接收,测试发现该项不要,首次加载获取不到父组件传过来的值。
messageData:{
type: undefined, //验证类型,也可以验证其他类型
default: "", //如果父组件传值,则用父组件的值渲染,反之使用默认值
},
2、监听,数据变换时重新实例化图表数据
watch:{
messageData(n){
console.log("监听柱状图:",n);
this.chartTime = n;
this.getReleaseTimeOut(this.chartTime);
this.$nextTick(() => {
this.initChart();
});
}
},
3、图表初始化时,把父组件的值传给接口调用
mounted() {
console.log("柱状图--mounted-:",this.messageData)
this.chartTime = this.messageData;
this.getReleaseTimeOut(this.chartTime);
this.$nextTick(() => {
this.initChart();
});
},
三、详细代码
说明父组件为index.vue,两个子组件:一个BarChartTimeOut.vue为柱状图组件,另外TablePeopleChart为一个表格组件(该组件传值没贴代码,其实是一致的)。
1、父组件 index.vue,父组件中包括自定义的当天、当月、当年的快捷时间选择按钮,根据选择的值传给子组件,由子组件调用后台接口。
<template>
<div class="dashboard-editor-container">
<el-row>
<!--放行超时统计-->
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-releaseTimeout">
<div class="title_frame">
<div class="title">放行超时统计
<div class="title_fast">
<el-button type="text" plain size="mini" round @click="getByDayTimeOut">今日</el-button>
<el-button type="text" plain size="mini" round @click="getByMonthTimeOut">本月</el-button>
<el-button type="text" plain size="mini" round @click="getByYearTimeOut">今年</el-button>
<div class="date_title">
<el-date-picker
v-model="formData.selectReleaseTimeoutDate"
type="daterange"
align="right"
size = "small"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
value-format ="yyyy-MM-dd"
@change="getByDateTimeOut">
</el-date-picker>
</div>
</div>
</div>
</div>
<!--上面的时间选择是父组件,下面的是引用了BarChartTimeOut 的一个子组件,
message-data和子组件传值,该值不能用驼峰命名,子组件用驼峰命名接收。barChartTimeOut是父组件的需要传输的值。
-->
<div class="chart_bar">
<BarChartTimeOut :message-data="barChartTimeOut"/>
</div>
</div>
</el-col>
<!--放行统计-->
<el-col :xs="24" :sm="24" :lg="12">
<div class="chart-releasePeople">
<div class="title_frame">
<div class="title">放行统计
<div class="title_fast">
<el-button type="text" plain size="mini" round @click="getByDayPeople">今日</el-button>
<el-button type="text" plain size="mini" round @click="getByMonthPeople">本月</el-button>
<el-button type="text" plain size="mini" round @click="getByYearPeople">今年</el-button>
<div class="date_title">
<el-date-picker
v-model="formData.selectPeopleTimeDate"
type="daterange"
align="right"
size = "small"
unlink-panels
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份"
value-format ="yyyy-MM-dd"
@change="getByDatePeople">
>
</el-date-picker>
</div>
</div>
</div>
</div>
<!--和上面类型,另外一个子组件-->
<div >
<TablePeopleChart :message-data="tablePeopleChartTime"/>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import BarChartTimeOut from "./components/BarChartTimeOut";
import TablePeopleChart from "./components/TablePeopleChart";
import { Format } from "@/api/fault/utilsTime";
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
},
};
export default {
name: "Index",
// 子组件注入
components: {
BarChartTimeOut,
TablePeopleChart,
},
data() {
return {
//存放日期所选的值
formData:{
selectReleaseTimeoutDate: '',
selectPeopleTimeDate:'',
},
//父组件的值
barChartTimeOut:[],
tablePeopleChartTime:[],
};
},
created(){
//首次进入默认选择当天的时间
this.getByDayTimeOut();
this.getByDayPeople();
},
methods: {
//时间框选择
getByDateTimeOut(){
this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
console.log("fu时间选择",this.barChartTimeOut);
},
getByDatePeople(){
this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
console.log("fu时间人员选择",this.tablePeopleChartTime);
},
//当天时间
getByDayTimeOut(){
const start = new Date().Format("yyyy-MM-dd");
this.$set(this.formData,'selectReleaseTimeoutDate',[start,start]);
this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
console.log("fu当天选择",this.formData.selectReleaseTimeoutDate);
},
getByDayPeople(){
const start = new Date().Format("yyyy-MM-dd");
this.$set(this.formData,'selectPeopleTimeDate',[start,start]);
this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
console.log("fu当天人员选择",this.tablePeopleChartTime);
},
// 当前月第一天和最后一天
getByMonthTimeOut(){
let month = this.getMonth();
console.log("fu当月超时选择",month);
this.$set(this.formData,'selectReleaseTimeoutDate',month);
this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
console.log("fu当月超时选择",this.formData.selectReleaseTimeoutDate);
},
getByMonthPeople(){
let month = this.getMonth();
this.$set(this.formData,'selectPeopleTimeDate',month);
this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
console.log("fu当月人选择",this.formData.selectPeopleTimeDate);
},
// 获取本年第一天和最后一天
getByYearTimeOut(){
let year = this.getYear();
this.$set(this.formData,'selectReleaseTimeoutDate',year);
this.barChartTimeOut = this.formData.selectReleaseTimeoutDate;
console.log("fu当年超时选择",this.formData.selectReleaseTimeoutDate);
},
getByYearPeople(){
let year = this.getYear();
this.$set(this.formData,'selectPeopleTimeDate',year);
this.tablePeopleChartTime = this.formData.selectPeopleTimeDate;
console.log("fu当年人选择",this.formData.selectPeopleTimeDate);
},
getMonth(){
var date = new Date();
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
return [firstDay.Format("yyyy-MM-dd"),lastDay.Format("yyyy-MM-dd")]
},
getYear(){
var date = new Date();
var now_year = date.getFullYear();
var YearStart = new Date(now_year, 0, 1);
var YearEnd = new Date(new Date(now_year, 11, 31));
return [YearStart.Format("yyyy-MM-dd"),YearEnd.Format("yyyy-MM-dd")]
},
},
}
};
</script>
<style lang="scss" scoped>
</style>
2、BarChartTimeOut.vue子组件。
(另外一个TablePeopleChart子组件一样,不展示了)
<template>
<div :class="className" :style="{ height: height, width: width }" />
</template>
<script>
import echarts from "echarts";
require("echarts/theme/dark"); // echarts theme
import resize from "./mixins/resize";
import {getReleaseTimeOutStatistics,} from "@/api/fault/faultFlightDynamic";
const animationDuration = 6000;
export default {
mixins: [resize],
props: {
messageData:{
type: undefined, //验证类型,也可以验证其他类型
default: "", //如果父组件传值,则用父组件的值渲染,反之使用默认值
},
className: {
type: String,
default: "chart",
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
},
watch:{
messageData(n){
console.log("监听柱状图:",n)
this.chartTime = n;
this.getReleaseTimeOut(this.chartTime);
this.$nextTick(() => {
this.initChart();
});
}
},
data() {
return {
chart: null,
chartTime:[],
timeOutX:[],
timeOutY:[],
};
},
mounted() {
console.log("柱状图--mounted-:",this.messageData)
this.chartTime = this.messageData;
this.getReleaseTimeOut(this.chartTime);
this.$nextTick(() => {
this.initChart();
});
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
//请求后台接口
getReleaseTimeOut(time){
// const time = '';
getReleaseTimeOutStatistics(time).then((response) => {
console.log("放行超时统计请求:",time);
console.log("放行超时统计返回:",response);
if (response.code === 0) {
if (response.data) {
this.timeOutX = [];
this.timeOutY = [];
response.data.forEach((item) => {
this.timeOutX.push(item.station);
this.timeOutY.push(item.number);
});
}
this.initChart();
}
});
},
initChart() {
// this.chart = echarts.init(this.$el, "dark");
this.chart = echarts.init(this.$el, "white");
console.log("--XXXX--------", this.timeOutX);
console.log("--YYYYY--------", this.timeOutY);
this.chart.setOption({
title:{
text: '',
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: this.timeOutX,
animationDuration,
axisTick: {
alignWithLabel: true
},
axisLabel: {
interval: 0,
rotate: 50
},
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '数量',
type: 'bar',
barWidth: '60%',
data: this.timeOutY,
animationDuration
}
],
itemStyle: {
color: '#0066FF',
// color: '#2ca9e1',
barBorderRadius: 5,
// shadowBlur: 3
},
});
},
},
};
</script>
<style>
.bar_chart{
width: 100px;
line-height: 50px;
}
.title {
padding: 0 10px;
height: 30px;
color: #b6a2de;
line-height: 15px;
border-bottom: 1px solid #dddddd;
text-align: center;
}
</style>
浏览器打印效果:
另外说明:
父组件给子组件的div传值,无需监听。只用props就能得到数据。
div中用{{}}展示数据即可,{{}}填入子组件接收的方法.字段