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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jQuery开发者都需要知道的5个小技巧
Jan 08 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
教你如何终止JQUERY的$.AJAX请求
Feb 23 Javascript
ES6新特性之变量和字符串用法示例
Apr 01 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
微信小程序如何利用getCurrentPages进行页面传值
Jul 01 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制作简单的内容采集器的原理分析
2008/10/01 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
探讨如何使用SimpleXML函数来加载和解析XML文档
2013/06/07 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
jQuery实现的表格前端排序功能示例
2017/09/18 jQuery
基于滚动条位置判断的简单实例
2017/12/14 Javascript
浅谈开发eslint规则
2018/10/01 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
Python中bisect的用法
2014/09/23 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
Python OS模块常用函数说明
2015/05/23 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
python文件读取失败怎么处理
2020/06/23 Python
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
专业实习自我鉴定
2013/10/29 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
电脑教师的自我评价
2013/12/18 职场文书
人口与计划生育目标管理责任书
2014/07/29 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS