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 相关文章推荐
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
PHP下对字符串的递增运算代码
2010/08/21 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
js 文件引入实现代码
2010/04/23 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python中的匿名函数使用简介
2015/04/27 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
贝佳斯官方网站:Borghese
2020/05/08 全球购物
一套带答案的C++笔试题
2014/01/10 面试题
职专应届生求职信
2013/11/16 职场文书
党员自我评价分享
2013/12/13 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
中介业务员岗位职责
2014/04/09 职场文书
实践单位评语
2014/04/26 职场文书
模具专业自荐信
2014/05/29 职场文书
端午节活动总结
2014/08/26 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
springboot中一些比较常用的注解总结
2021/06/11 Java/Android