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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
Mar 03 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 Javascript
JavaScript实现拖拽功能
Feb 11 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
基于mysql的论坛(4)
2006/10/09 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
php curl模拟post提交数据示例
2013/12/31 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
javascript实现博客园页面右下角返回顶部按钮
2015/02/22 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
python处理csv中的空值方法
2018/06/22 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
物业管理公司实习生自我鉴定
2013/09/19 职场文书
机械专业毕业生自荐信
2013/11/02 职场文书
八一慰问活动方案
2014/02/07 职场文书
请假条格式范文
2014/04/10 职场文书
小学评语大全
2014/04/22 职场文书
实践单位评语
2014/04/26 职场文书
《静夜思》教学反思
2016/02/17 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python