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接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
随机推荐
- Stm32使用串口空闲中断,基于队列来接收不定长、不定时数据
串口持续地接收不定长.不定时的数据,把每一帧数据缓存下来且灵活地利用内存空间,下面提供一种方式供参考.原理是利用串口空闲中断和DMA,每当对方发来一帧完整的数据后,串口接收开始空闲,触发中断,在中断处 ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Java 添加超链接到Word文档
对特定元素添加超链接后,用户可以通过点击被链接的元素来激活这些链接,通常在被链接的元素下带有下划线或者以不同的颜色显示来进行区分.按照使用对象的不同,链接可以分为文本超链接,图像超链接,E-mail链 ...
- `MediaDevices.getUserMedia` `undefined` 的问题
通过 MediaDevices.getUserMedia() 获取用户多媒体权限时,需要注意其只工作于以下三种环境: localhost 域 开启了 HTTPS 的域 使用 file:/// 协议打开 ...
- 使用hexo、github Pages搭建博客
1. 安装node 如果本机已经有node,为避免安装出现问题,建议先升级到最新版.参考:https://juejin.im/post/5b9739d1e51d450e9f66ee3b 2. 安装he ...
- C#NULL条件运算符
C#6.0新增的特性 NULL条件运算符 ?. 之前我们在需要判断某个对象是否为空的是这样的 Person per = null; if (per != null) { Console.Write(& ...
- 提速企业应用开发,Ntaub 3极速开发平台发布
企业管理系统搞了这么多年,还是以表单.数据增删改这些功能为主.唯一的变化就是“变化”,企业的业务模式和流程越来越多样化,开发需求变更越来越频繁,开发周期却要求越来越短. 无代码.低代码开发平台开始流行 ...
- oracle 架构图
- CodeForces - 1265D(贪心+暴力)
题意 https://vjudge.net/problem/CodeForces-1265D a个0,b个1,c个2,d个3,问是否存在一种排列方案使得任意相邻两数之差==1 思路 分类讨论太麻烦了, ...
- Fail-fast
实际上,java.util.Iterator 的大多数实现都提供了故障快速修复(Fail-fast)的机制 ⎯⎯在利用迭代器遍历某一容器的过程中,一旦发现该容器的内容有所改变,迭代器就会抛出 Conc ...