vue中子组件的methods中获取到props中的值方法


Posted in Javascript onAugust 27, 2018

父子组件通信

这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可

例如:

父组件中

<template>
  <div>
    <head-top></head-top>
    <section class="data_section">
      <header class="chart-title">数据统计</header>
      <el-row :gutter="20" class="chart-head">
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">统计:</div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售数量 <span>{{number}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售金额 <span>{{amount}}</span></div></el-col>
        <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">利润统计 <span>{{profits}}</span></div></el-col>
      </el-row>
    </section>
    <chart :chartData="chartData"></chart>
  </div>
</template>

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: [10,10,10]
      }
    },
</script>

子组件中

export default {
  props: ['chartData']
}

这种情况下,子组件的methods中想要取到props中的值,直接使用this.chartData即可

但是有写情况下,你的chartData里面的值并不是固定的,而是动态获取的,这种情况下,你会发现methods中是取不到你的chartData的,或者取到的一直是默认值

比如下面这个情况

父组件中

<script>
  data(){
      return {
        number: null,
        amount: null,
        profits: null,
        chartData: []
      }
    },
    mounted(){
      this.getStatistics();
    },
    methods: {
      //获取统计数据
      getStatistics(){
        console.log('获取统计数据')
        axios.post(api,{

        }).then((res) => {
          this.number = res.data.domain.list[0].number;
          this.amount = res.data.domain.list[0].amount;
          this.profits = res.data.domain.list[0].profits;
          this.chartData = [this.number,this.amount,this.profits];
        }).catch((err) => {
          console.log(err);
        })
      },
    },
</script>

此时子组件的methods中使用this.chartData会发现是不存在的(因为为空了)

这情况我是使用watch处理

解决方法如下:

使用watch

props: ['chartData'],
    data(){
      return {
        cData: []
      }
    },
    watch: {
      chartData: function(newVal,oldVal){
        this.cData = newVal; //newVal即是chartData
        this.drawChart();
      }
    },

监听chartData的值,当它由空转变时就会触发,这时候就能取到了,拿到值后要做的处理方法也需要在watch里面执行

以上这篇vue中子组件的methods中获取到props中的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
Javascript Memoizer浅析
Oct 16 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
JavaScript自定义文本框光标
Mar 05 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 #Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
Aug 27 #Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 #Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 #Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 #Javascript
vue监听input标签的value值方法
Aug 27 #Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 #Javascript
You might like
百度实时推送api接口应用示例
2014/10/21 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
JS实现简单的浮动碰撞效果示例
2017/12/28 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
Python3基础之基本数据类型概述
2014/08/13 Python
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
Python的Django框架安装全攻略
2015/07/15 Python
python+django快速实现文件上传
2016/10/24 Python
TensorFlow实现MLP多层感知机模型
2018/03/09 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python中append实例用法总结
2019/07/30 Python
Python猴子补丁知识点总结
2020/01/05 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
开业庆典答谢词
2014/01/18 职场文书
大学生优秀团员事迹材料
2014/01/30 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
教务处干事工作总结
2015/08/14 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android