1. 父组件调用子组件时,在调用处传给子组件一个方法

:on-update="updateData"
 
2. 子组件在props中,接收这个方法并声明
props: {
 onUpdate: Function
}
 
3. 子组件中,需要通知父组件时,调用onUpdate这个方法,并传入参数data
this.opUpdate(data)
 
4. 父组件中,通过updataData方法,获取到子组件传过来的data,并做以操作
updateData (data) {
 // 这里可以使用子组件传过来的数据data
 // 也可以放子组件需要调用的父组件方法
}

关于Vue中,父组件获取子组件的数据(子组件调用父组件函数)的方法的更多相关文章

  1. asp.net中调用javascript自定义函数的方法(包括引入JavaScript文件)总结

    通常javascript代码可以与HTML标签一起直接放在前 端页面中,但如果JS代码多的话一方面不利于维护,另一方面也对搜索引擎不友好,因为页面因此而变得臃肿:所以一般有良好开发习惯的程序员都会把 ...

  2. 在vue中使用基于d3为基础的dagre-d3.js搞定一个流程图组件

    项目中想搞定一个流程图,开始使用了阿里的G6,但是G6目前不支持手势,这样就很郁闷了,因为公司的领导都是使用iPad看的,你不支持手势是不行的,后来又想到了百度的echarts,试了试,感觉还不错,手 ...

  3. vue中怎么实现获取当前点击对象this

    应用场景 在评论列表中,有很多条评论(通过循环出来的评论列表),评论的文字有多跟少,默认展示2行超出显示点击查看更多,,要点击查看更多对当前的这条评论进行全部评论展示! 问题描述 要是在传统的点击事件 ...

  4. Vue 中 换行符获取

    当要获取到 vue 中 文本域的换行符时, 需要用到正则匹配. let reg = new RegExp('/n',"g"); let str = text.replace(reg ...

  5. vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  6. Vue 及双向数据绑定 Vue事件 以及Vue中的ref获取dom节点

    <template> <div id="app"> <h2>{{msg}}</h2> <input type="te ...

  7. vue2.* 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点 04

    <template> <div id="app"> <!-- 双向数据绑定(必须在表单里面使用) m:model v:view mvvm:model改 ...

  8. vue中 表头 th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头th的单元格,且合并单元格的那列的表头数据是动态数据,也就是不知道会有多少个表头列,而这几个表头列还分了好几个子表头. 这个需求在js里用Ju ...

  9. vue中 表头th 合并单元格,且表格列数不定的动态渲染方法

    吐槽 今天,在vue中遇到 复杂表格的渲染 ,需要合并表头的单元格,且合并单元格的那列还是动态数据,也就是说你不知道会有多少组要合并起来,哎,我也有点说不清楚,废话不多说了,看代码把: 代码示例 da ...

  10. html中通过js获取接口JSON格式数据解析以及跨域问题

    前言:本人自学前端开发,一直想研究下js获取接口数据在html的实现,顺利地找到了获取数据的方法,但是有部分接口在调用中出现无法展示数据.经查,发现时跨域的问题,花费了一通时间,随笔记录下过程,以方便 ...

随机推荐

  1. Flutter响应式编程 - RxDart

    import 'package:flutter/material.dart'; import 'package:rxdart/rxdart.dart'; import 'dart:async'; cl ...

  2. Flutter 介绍、运行环境

    Flutter 是谷歌公司开发的一款开源.免费的移动 UI 框架,可以让我们快速的在 Android 和iOS 上构建高质量 App.它最大的特点就是跨平台.以及高性能. Flutter 基于谷歌的 ...

  3. Java8的时间日期API

    原先的时间 api  大部分已经过时了 Date构造器 需要传入年月日  但是对时间的加减操作比较麻烦 Calenda  加减比较方便 使用 LocalDate. LocalTime. LocalDa ...

  4. 提供Web相关的个工具类

    package com.opslab.util.web; import com.opslab.util.ConvertUtil;import com.opslab.util.StringUtil; i ...

  5. python学习:python打包成exe

    1) 安装pyinstaller pip install pyinstaller 目前已经支持 python 3.7 版本 2) 打开cmd窗口,进入到要打包的python文件所在目录, pyinst ...

  6. pca数学原理(转)

    PCA的数学原理 前言 数据的向量表示及降维问题 向量的表示及基变换 内积与投影 基 基变换的矩阵表示 协方差矩阵及优化目标 方差 协方差 协方差矩阵 协方差矩阵对角化 算法及实例 PCA算法 实例 ...

  7. chrome浏览器调试JS代码

    是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这 ...

  8. web端自动化——webdriver驱动

    1.1Edge浏览器(不过,Edge浏览器只能运行于 Windows 10) Edge驱动的下载地址,复制链接http://go.microsoft.com/fwlink/?LinkId=619687 ...

  9. DES 指定键的大小对于此算法无效

    KEY (byte[])  长度不为8.  一般KEY使用UTF8编码.  byte[] byKey = Encoding.UTF8.GetBytes(key); 加密内容的编码,由两方协商. Sys ...

  10. win7和Ubuntu16.04之间相互远程控制

    一.在win7中远程控制ubuntu16.04 步骤: 在ubuntu中通过Desktop share打开允许远程访问 ubuntu中安装xrdp 由于xrdp与unity.gnome桌面不兼容,所以 ...