VUE 子组件向父组件传值 , 并且触发父组件方法(函数)
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>
1.子组件
<div>
<input v-model="listQuery.keyword">
<span>筛选搜索</span>
<el-button @click="search" >查询搜索</el-button>
</div>
methods: {
search(){
//this.$emit('父组件名称',传到父组件的参数);
this.$emit('searchListZ', this.listQuery);
this.$parent.getList();//执行父组件函数
}
}
2.父组件
//这里的名称要和子组件里的名称一致this.$emit('searchListZ', this.listQuery);
<jTable v-on:searchListZ="searchListZ"></jTable>
methods: {
searchListZ(form) {
//form参数是子组件传过来的,把他赋值到搜索条件上就行
this.searchForm= {...form}; //searchForm为父组件里的属性
console.log(form)
},
}
VUE 子组件向父组件传值 , 并且触发父组件方法(函数)的更多相关文章
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ZDialog关闭父窗口、往父窗口传值、刷新父窗口
关闭自己 //关闭自己 top.Dialog.close(); 关闭父窗口 //关闭父窗口 parentDialog.parentWindow.close() 往父窗口传值 //在本页面,调用父页面方 ...
- JQuery 点击子控件事件,不会触发父控件的事件
$('.order-delete').on('tap', function (e) { console.log('删除1'); c ...
- 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2使用组件进行父子互相传值的sync语法糖方法和原生方法
原生方法:(事件名可以不在props通道里) 子类通过props通道绑定父类里data里的jjjjjj(@:fefefeff='jjjjjjjjjjjjj') 父组件通过监听fefeff事件来把子类传 ...
- 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)
<div onclick="alert();"> <div onclick="alert();"></div> </d ...
- FineUI小技巧(5)向子窗口传值,向父窗口传值
前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...
- Android 子activity关闭 向父activity传值
使用startActivity方式启动的Activity和它的父Activity无关,当它关闭时也不会提供任何反馈. 可变通的,你可以启动一个Activity作为子Activity,它与父Activi ...
- Vue中常用的几种传值方式
Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...
随机推荐
- 斜率dp A - Print Article HDU - 3507
A - Print Article HDU - 3507 今天刚刚学习了一下斜率dp,感觉还ok,主要就是要推这个斜率,然后利用数据结构来优化. 推荐两篇写的比较好的博客,https://www.cn ...
- 记忆化搜索 E - Loppinha, the boy who likes sopinha Gym - 101875E
E - Loppinha, the boy who likes sopinha Gym - 101875E 这个题目是一个dp,这个应该很容易看出来,但是对于状态的定义其实有点难去想, 看了题解dp[ ...
- 环境篇:Atlas2.0.0兼容CDH6.2.0部署
环境篇:Atlas2.0.0兼容CDH6.2.0部署 Atlas 是什么? Atlas是一组可扩展和可扩展的核心基础治理服务,使企业能够有效地满足Hadoop中的合规性要求,并允许与整个企业数据生态系 ...
- CC2530ADC应用
ADC单通道外部电压采集 需要设置一个上机位命令控制字符. 系统时钟初始化——32MHZ晶振 串口0函数初始化——设置串口对应引脚,波特率,清楚中断标志 串口0接收中断响应函数——U0DBUF将控制命 ...
- SSM + MYSQL 酒店客房管理系统
酒店客房管理系统的设计与实现是采用JSP技术,MYSQL数据库进行开发的.系统具有灵活的一体化设计方式,圆满完成了整个系统的全面设计,系统主要采用JSP技术开发,提高系统的运行性能和安全性,并且易于维 ...
- 关于C语言的位运算符
早期cpu架构在运行位运算时 略微领先 + - 运算 大幅领先 * / % 运算 '&' 运算符 总结 两个二进制中对应的位置都为 1 结果的对应二进制为 1 '&'运算符可以用到奇偶 ...
- 更加灵活的参数校验,Spring-boot自定义参数校验注解
上文我们讨论了如何使用@Min.@Max等注解进行参数校验,主要是针对基本数据类型和级联对象进行参数校验的演示,但是在实际中我们往往需要更为复杂的校验规则,比如注册用户的密码和确认密码进行校验,这个时 ...
- 面试总结:鹅厂Linux后台开发面试笔试C++知识点参考笔记
文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 文章是由自己笔试面试腾讯的笔记整理而来,整理的时候又回顾了一遍,中间工 ...
- linux --批量修改文件内容
由于目前测试的BIOS有一个option 发生了改变,因此我们需要在之前写好的脚本上进行修改,将旧的option 改为新的选项,因此在此处用到了批量修改文件中的内容: 1. perl 命令替换: pe ...
- Python列表,元组,字典,字符串方法笔记
01. 列表 1.1 列表的定义 List(列表) 是 Python 中使用 最频繁 的数据类型,在其他语言中通常叫做 数组 专门用于存储 一串 信息 列表用 [] 定义,数据 之间使用 , 分隔 列 ...