原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据。

子组件:

<button @click="sendChildData">点击我将子组件的数据传递给父组件</button>
data () {
return {
childData: 111
}
},
methods:{
sendChildData(){
this.$emit('sendtoFu',this.childData);
}
}

父组件:

<子组件 @sendtoFu="getChildData"></子组件>
<div>这是子组件传递过来的数据 ---> {{ isMe }} </div>
data() {
return {
isMe : ''
}
},
methods:{
getChildData(data){
this.isMe = data;
}
},

vue $emit $on 从子组件传递数据给父组件的更多相关文章

  1. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  2. Vue子组件传递数据给父组件

    子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...

  3. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  4. vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

  5. layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...

  6. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  8. vuejs子组件向父组件传递数据

    子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...

  9. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

随机推荐

  1. Supermap/Cesium 开发心得----定位

    SuperMap的WebGL是基于开源JS库Cesium做的修改而形成的产品,理论上用起来大同小异,如果在有不一样的地方再看,基本上还是与Cesium的接口名称和结构是一样的. 定位方法有基于Cesi ...

  2. Xamarin.Forms 界面布局

    <!--margin表示控件相对StackLayout的位置是设置组件之间的距离,或者距离父组件边缘的距离,    他的四个值是左边距,上边距,右边距,下边距  -->    <!- ...

  3. RMAN备份数据库与表空间

    脚本: 数据库备份: backup database format='/u01/app/oracle/oradata/Backup/oradb_%d_%s.bak'; 表空间备份:backup tab ...

  4. Asp.Net MVC Webapi Eventsource 实现时效消息

    ApiController 后端API public System.Net.Http.HttpResponseMessage GetUnknownNotices() { var user = Form ...

  5. SpringBoot+idea搭建微服务简化流程

    作者:个人微信公众号:程序猿的月光宝盒 1.新建普通maven工程 2.在父级pom中按需修改 3.删除父级src目录 4.创建公共模块common,里面只有service接口和实体类 5.构建微服务 ...

  6. JavaWeb中的MVC

    不使用什么MVC的案例分析: 利用Servlet与jsp实现登陆请求,数据库查询,以及页面的跳转逻辑 具体流程如下: 不做任何结构上的考虑,可以简单的做如下实现: 目录结构 LoginServlet ...

  7. pandas 初识(六)-可视化

    Pandas 在一张图中绘制多条线 import pandas as pd import numpy as npimport matplotlib.pyplot as plt df = pd.Data ...

  8. [转]UiPath Deployment Architecture

    本文转自:https://dotnetbasic.com/2019/08/uipath-deployment-architecture.html We will learn step by step ...

  9. 【好书推荐】《剑指Offer》之硬技能(编程题12~16)

    本文例子完整源码地址:https://github.com/yu-linfeng/BlogRepositories/tree/master/repositories/sword <[好书推荐]& ...

  10. VUE组件 之 高德地图地址选择

    注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2 ...