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

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. Linova and Kingdom(树型-贪心)

    题目大意:给定一棵树,1为首都(首都可以是工业城市也可以是旅游城市),一共有n个点. 其中要选出k个工业城市,每个工业城市出一个代表去首都,其快乐值是其途径旅游城市(非工业)的个数 求所有快乐值相加的 ...

  2. numpy数组的分割与合并

    合并 np.newaxis import numpy as np a=np.array([1,2,3])[:,np.newaxis]#变成列向量 b=np.array([4,5,6])[:,np.ne ...

  3. 【Scala】scala的继承能干嘛?这段简单的代码或许能帮你梳理

    package cn.itcast.scala.demo2 class Person { //private关键字和final关键字修饰的常量无法被继承重写 val id: Int = 1 var n ...

  4. javaWeb删除一条及多条数据

    一.编写dao //删除根据ID@Delete("delete from product where id=#{id}")public void delete(Integer id ...

  5. ql的python学习之路-day15

    前言:本节主要讲解的是文件路径 在实际的软件开发中会设计一个项目的文件目录,按照执行包bin.配置包config.核心包core等来设计,在执行包里面要运行核心包里的主程序mian,由于不在同一级的目 ...

  6. MySQL 数据库的基本使用

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,而MySQL AB 公司被 Oracle 公司收购,故 MySQL 现在属于 Oracle 公司.MySQL 是一种关联数据 ...

  7. 剑指Offer02之替换空格

    剑指Offer02之替换空格 题目描述 实现一个方法,将输入的字符串中的空格替换成%20. 例子如下 hello world --> hello%20world 代码实现 //方法一 采用Jav ...

  8. Java Web项目部署到阿里云服务器(ECS)

    本篇随笔只是记录博主第一次将自己的Java项目部署到阿里云服务器的大致过程,具体细节还请参考别的博文. 一.项目介绍 我做的项目是利用maven项目构建工具进行搭建基于SSM框架的代码共享管理系统,主 ...

  9. 使用urllib

    urlopen的基本用法: 工具为:python3(windows) 其完整表达式为: urllib.request.urlopen(url, data=None, [timeout, ]*, caf ...

  10. jquery.min.js v1.10.3版本autocomplete方法会在text前添加搜索出多少项的文本信息 要去除

    http://stackoverflow.com/questions/13011127/how-to-remove-change-jquery-ui-autocomplete-helper-text ...