本文重点:动态传值,动态!!
父组件往子组件动态传值 , 只讲其中一种
至于另外一种refs的传值,自行百度去
组件的使用就不再赘述了,直接上图教你正确的写法就行了
本文中的组件是echarts中的水球图组件
父组件中子组件的写法
<el-col :xs="24" :sm="24" :lg="24">
<div class="chart-wrapper mb15" style="height: 350px">
<el-col class="wrapperLabel">
<i class="el-icon-coin"><span>库房容量</span></i>
</el-col>
// 第一个waterData是子组件内接收的值
// 第二个也就是双引号""内的waterData2是本页面(父组件)内定义的值
<water-chart :waterData="waterData2"/>
</div>
</el-col>
父组件中值的定义
<script>
import WaterChart from "./dashboard/WaterChart"; //引入水球图组件路径
import PieChart from "./dashboard/PieChart";
import BarChart from "./dashboard/BarChart";
import {
getIndex } from "@/api/index";
export default {
name: "Index",
components: {
WaterChart, //加载组件名称
PieChart,
BarChart,
},
data() {
return {
waterData2:[],//水球图数据
pieData:[],//报警数据
};
},
created() {
this.getIndexData();
},
methods: {
getIndexData() {
getIndex().then((res) => {
this.pieData=res.alarm;
this.waterData2=res.warehouseInventoryInOutSum;// 接口数据
console.log('父页面',this.waterData2);
});
},
},
};
</script>
子组件中值的定义
重点:(data里被监听的值的名字要与watch里方法的名字一致!!!)
//方法名字为父组件调用子组件时冒号:绑定的值的名字
//curVal为新值
//oldVal为老值
waterData(curVal, oldVal) {
if (curVal) {
// this.waterData
this.waterData = curVal;
console.log('子页面',this.waterData);
// 传递的数据处理
this.waterData.forEach((item) => {
return this.data.push(item.inRate);
});
this.$nextTick(() => {
// 调用methods里写好的方法
this.initWater();
});
}
},
**这里重点说明一些东西, 父组件往子组件传值是通过 **
- 父组件引用子组件标签,并在标签内 以 :XXX=XXXX的形式传递数据
- 子组件页面props接收XXX的数据
- 在methods里定义的方法里面可以直接调用this.XXX就行(有诟病)
诟病解释:
如上述直接调用的使用方法,仅适用于父组件向子组件传递的值是定义好的死值
有心的可以动手打印一下就明白了, 页面加载的顺序是
- 父组件加载
- 父组件里的子组件加载
- 子组件里的标签以及方法调用
- 父组件里的接口调用
- 父组件里接口返回的值向子组件传递
- 子组件定义的值依然为步骤3里的值,并未发生改变
如若未加watch监听事件
这5个步骤走下来,
F12控制台console.log()的打印顺序将为
如何父组件获取接口的值动态传递到子组件呢,就是如同有红色框框的那个图里所示
写vue的watch监听事件
F12控制台console.log()的打印顺序将为
动态传值搞定.