vue 父组件往子组件(动态)传值,数据实时监听

本文重点:动态传值,动态!!

父组件往子组件动态传值 , 只讲其中一种
至于另外一种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()的打印顺序将为
在这里插入图片描述
动态传值搞定.

vue 父组件往子组件(动态)传值,数据实时监听

本文重点:动态传值,动态!!

猜你喜欢