目标:封装一个  搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>

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 子组件向父组件传值 , 并且触发父组件方法(函数)的更多相关文章

  1. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ZDialog关闭父窗口、往父窗口传值、刷新父窗口

    关闭自己 //关闭自己 top.Dialog.close(); 关闭父窗口 //关闭父窗口 parentDialog.parentWindow.close() 往父窗口传值 //在本页面,调用父页面方 ...

  3. JQuery 点击子控件事件,不会触发父控件的事件

     $('.order-delete').on('tap', function (e) {                  console.log('删除1');                  c ...

  4. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue2使用组件进行父子互相传值的sync语法糖方法和原生方法

    原生方法:(事件名可以不在props通道里) 子类通过props通道绑定父类里data里的jjjjjj(@:fefefeff='jjjjjjjjjjjjj') 父组件通过监听fefeff事件来把子类传 ...

  6. 如何禁用事件的浮升(div的子元素的点击事件会触发父元素的点击事件)

    <div onclick="alert();"> <div onclick="alert();"></div> </d ...

  7. FineUI小技巧(5)向子窗口传值,向父窗口传值

    前言 FineUI中经常会用到启用IFrame的Window控件,这样有助于从物理上进行代码解耦和.IFrame的引入就会涉及传值问题,如何在父窗口和子窗口之间相互传值呢? 向子窗口传值 向子窗口传值 ...

  8. Android 子activity关闭 向父activity传值

    使用startActivity方式启动的Activity和它的父Activity无关,当它关闭时也不会提供任何反馈. 可变通的,你可以启动一个Activity作为子Activity,它与父Activi ...

  9. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

随机推荐

  1. Java——字节和字符的区别

    字节 1.bit=1  二进制数据0或1 2.byte=8bit  1个字节等于8位 存储空间的基本计量单位 3.一个英文字母=1byte=8bit 1个英文字母是1个字节,也就是8位 4.一个汉字= ...

  2. P1364 医院设置(树型结构)

    传送门闷闷闷闷闷闷 ~~放一个可爱的输入框.~~ 考虑在O(n)的时间内求数以每个节点为医院的距离和. \(设想一下,如果我们已知以1为根节点的距离和f[1],如何求出子节点呢?\) 当医院从1转换到 ...

  3. K - Painful Bases 状压dp

    Painful Bases LightOJ - 1021 这个题目一开始看,感觉有点像数位dp,但是因为是最多有16进制,因为限制了每一个数字都不同最多就有16个数. 所以可以用状压dp,看网上题解是 ...

  4. Qt数据库总结

    使用Qt SQL库 头文件: #include <QtSql> 项目: QT += sql 常用类 QSqlDatabase:数据库的连接打开等操作 QSqlQuery:执行语句,获取结果 ...

  5. [UVA Live 12931 Common Area]扫描线

    题意:判断两个多边形是否有面积大于0的公共部分 思路:扫描线基础. #pragma comment(linker, "/STACK:10240000") #include < ...

  6. Spark SQL源码解析(四)Optimization和Physical Planning阶段解析

    Spark SQL原理解析前言: Spark SQL源码剖析(一)SQL解析框架Catalyst流程概述 Spark SQL源码解析(二)Antlr4解析Sql并生成树 Spark SQL源码解析(三 ...

  7. yum安装mysql 之后问题

    日志报错: 190412 15:56:50 [ERROR] Can't open the mysql.plugin table. Please run mysql_upgrade to create ...

  8. Flash 被禁止运行的方法

    下面以谷歌浏览器 和 火狐浏览器 来说明. █ 自2020 年以来, 谷歌浏览器(Chome)已全面禁止Flash的运行,我们可以通过如下方法开启: █ 火狐(FireFox) 也禁止,但需要点“运行 ...

  9. dedecms织梦建站后怎么防止被黑,加强安全漏洞措施?

    dedecms织梦建站后怎么防止被黑,加强安全漏洞措施? 很多人反映dedecms织梦网站被黑的情况,因为织梦相对来说漏洞还是挺多的,特别是新建设的站点,有些目录.文件该删的删,权限及安全都要设置,以 ...

  10. DVWA-反射型XSS

    0x01 XSS介绍 XSS,全称Cross Site Scripting,即跨站脚本攻击,某种意义上也是一种注入攻击,是指攻击者在页面中注入恶意的脚本代码,当受害者访问该页面时,恶意代码会在其浏览器 ...