vue $emit $on 从子组件传递数据给父组件
原理是: 子组件使用$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 从子组件传递数据给父组件的更多相关文章
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件 以下是例子: father.vue 父组件 <template> <div> <child @ne ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
- layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层
最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vuejs动态组件给子组件传递数据
vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...
- vuejs子组件向父组件传递数据
子组件通过$emit方法向父组件发送数据,子组件在父组件的模板中,通过自定义事件接收到数据,并通过自定义函数操作数据 <!DOCTYPE html> <html lang=" ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
随机推荐
- java面向对象 - 匿名对象
一.匿名对象 1. 创建的对象,没有显示的赋给一个变量名,即为匿名对象. 2. 匿名对象只能调用一次 二.匿名对象使用 class Phone { private int price; public ...
- 全文检索--Lucene & ElasticSearch
全文检索--Lucene 2.1 全文检索和以前高级查询的比较 1.高级查询 缺点:1.like让数据库索引失效 2.每次查询都是查询数据库 ,如果访问的人比较多,压力也是比较大 2.全文检索框架:A ...
- 【转】CAP 定理的含义
原文链接:CAP 定理的含义 作者: 阮一峰 日期: 2018年7月16日 分布式系统(distributed system)正变得越来越重要,大型网站几乎都是分布式的. 分布式系统的最大难点,就是各 ...
- 从eslint规则学点JavaScript知识
在知识星球陆续发了些eslint小知识,意在通过eslint知识去了解规则内部的原理,汇总在此: prefer-const 含义:始终用const定义你从不修改的变量,如果会被修改则使用let,永不使 ...
- 痛苦的 java.net.BindException: Address already in use: connect —— Nacos的坑
我的dubbo应用, 刚开始的时候,启动一两个是没有问题的, 启动多了就大量出现: -- :: --- [TaskScheduler-] o.s.c.a.nacos.discovery.NacosWa ...
- SpringBoot2 整合 Drools规则引擎,实现高效的业务规则
本文源码:GitHub·点这里 || GitEE·点这里 一.Drools引擎简介 1.基础简介 Drools是一个基于java的规则引擎,开源的,可以将复杂多变的规则从硬编码中解放出来,以规则脚本的 ...
- 转载 SAP用户权限控制设置及开发
创建用户SU01 事务码:SU01,用户主数据的维护,可以创建.修改.删除.锁定.解锁.修改密码等 缺省:可以设置用户的起始菜单.登录的默认语言.数字显示格式.以及日期和时间的格式设置 参数:SAP很 ...
- Python骚操作!一行命令把电脑变成服务器!
不知道你有没有遇到这么一种情况,就是你有时候想要把电脑上的一些东西传输到你的手机或者 Pad ,你要么需要使用数据线连接到电脑,有时候还要装各种驱动才可以进行数据传输,要么需要借助第三方的工具,在局域 ...
- tomcat修改使用指定的jdk版本
linux安装的jdk1.6,无法满足当前tomcat项目使用,所以需要指定为更高版本的jdk. 主要修改tomcat bin目录下的catalina.sh和setclasspath.sh文件 添加内 ...
- BlockStack常见词语
Browser: 用户用来浏览并使用基于 blockstack 网络开发的 app. CLI: Cli 工具用来管理个人的 blockstack id. blockstack.js (and othe ...