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

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. F. Cards and Joy

    F. Cards and Joy 题目大意: 给你n个人,每一个人恰好选k张牌. 第一行是 n 和 k 第二行有n*k个数,代表有n*k张牌,每张牌上的数字 第三行有n个数,代表第i个人喜欢的数字 第 ...

  2. SpringCloud 踩坑之 注册中心绑定端口一直是8080

    今天在启动注册中心服务时,突然端口一直是8080,找了好久一直没找到原因,先看看我有问题的配置 spring: application: name: eureka-server profiles: d ...

  3. Python Web实战:Python+Django+MySQL实现基于Web版的增删改查

    前言 本篇使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web,少走弯路.效果演示在项目实战最 ...

  4. asp.net core + entity framework core 多数据库类型支持实战

    根据微软官方文档的说法,有两种方法可以实现在一个app中同时适应多种不同类型的数据库,并且全部支持migrations操作.其一,使用两个dbcontext:其二,修改migration文件,添加特定 ...

  5. Java -> 构造器(构造方法)

    构造方法 我们对封装已经有了基本的了解,接下来我们来看一个新的问题,依然以Person为例,由于Person中的属性都被private了,外界无法直接访问属性,必须对外提供相应的set和get方法.当 ...

  6. 常用DOS命令大全

    常用DOS命令大全 常用的内部命令有MD.CD.RD.DIR.PATH.COPY.TYPE.EDIT.REN.DEL.CLS.VER.DATE.TIME.PROMPT 常用的外部命令有DELTREE. ...

  7. 黑马程序员_毕向东_Java基础视频教程——进制(随笔)

    进制的特点 进制的由来 任何数据在计算机中都是以二进制的形式存在.二进制最早由电信号演变而来. 一个整数在内存中一样也是二进制,但是使用一大串的0 1组成的二进制数进行使用很麻烦所以就想把一大串缩短点 ...

  8. 萌新带你开车上p站(终极番外)

    本文由“合天智汇”公众号首发,作者:萌新 0x01前言 这关其实和pwn关系不大,主要考察的都是linux下一些函数的操作,考察linux的基本功.涉及到的知识点包括一些经典的函数原型.IO重定向.文 ...

  9. 【C#】CsvHelper 使用手册

    目录 简介 模块 读取 读取所有记录 逐条读取 读取单个字段 写入 写入所有记录 逐条写入 逐字段写入 特性 Index Name NameIndex Ignore Optional Default ...

  10. 二、YARN

    一.YARN 介绍 yarn 是下一代 MapReduce,即 MRv2,是在第一代 MapReduce 基础上演变而来的,主要是为了解决原始 Hadoop 扩展性较差,不支持多计算框架而提出的,通俗 ...