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
Jun 05 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
js的一些常用方法小结
Jun 29 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
Apr 10 Javascript
vue实现同一个页面可以有多个router-view的方法
Sep 20 Javascript
实例详解带参数的 npm script
May 28 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
Vue-resource安装过程及使用方法解析
Jul 21 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/04/13 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
ThinkPHP之import方法实例详解
2014/06/20 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
js资料toString 方法
2007/03/13 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
js实现二级导航功能
2017/03/03 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
Bootstrap Paginator+PageHelper实现分页效果
2018/12/29 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python基于ID3思想的决策树
2018/01/03 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Flask-Mail用法实例分析
2018/07/21 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python如何访问字符串中的值
2020/02/09 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
探矿工程师自荐信
2014/01/24 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书