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 ...
随机推荐
- django3开发完整博客带评价
纯django开发最完美博客 2020年5月打造最时尚博客系统教程 为了学习速度,集中精力学习django和博客开发, 没有使用其它框架,也没有使用css预处理等 这样学起来最方便, 博客前后端都完成 ...
- 简单ajax跨域请求
最近遇到需要ajax跨域的需求 首先看下不做任何处理特别处理的ajax跨域请求会出现什么样的错误 客户端代码: <script type="text/javascript"& ...
- Spring Cloud学习 之 Spring Cloud Hystrix(使用详解)
文章目录 创建请求命令: 定义服务降级: 异常处理: 异常传播: 异常获取: 命令名称,分组以及线程池划分: 创建请求命令: Hystrix命令就是我们之前说的HystrixCommand,它用来 ...
- hadoop中如何动态更新集群队列和容量
1.集群默认是FIFO容量调度器,有的时候不同的业务部门都需要使用hadoop集群,那么这时候就需要来设置容量调度器了,如何平衡各个部门的容量.合理利用资源? 首先配置调度器需要在修改两个配置文件,分 ...
- 王颖奇 201771010129《面向对象程序设计(java)》第六周学习总结
实验六 继承定义与使用 实验时间 2018-9-28 1.目的与要求 理论部分: 继承(inheritance): 继承的特点:具有结构层次:子类继承了父类的域和方法. 主要内容: (1)类.子类.超 ...
- Linux dts 设备树详解(一) 基础知识
Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 1 前言 2 概念 2.1 什么是设备树 dts(device tree)? 2. ...
- Linux 内核工作队列之work_struct 学习总结
前言 编写Linux驱动的时候对于work_struct的使用还是很普遍的,很早之前就在阅读驱动源码的时候就看到了它的踪影,根据其命名大概知道了它的具体作用,但是仍然不知所以,同时,伴随出现的还有de ...
- [hdu2119]二分图最小覆盖,最大匹配
题意:给一个01矩阵,每次可以选一行或一列,打掉上面所有的1,求打掉所有的1所需的最小次数. 思路:经典的模型了,二分图最小覆盖=最大匹配.所谓最小覆盖是指选最少的点关联所有的边.容易得到将行和列看成 ...
- 简述SpringCloud框架
1.什么是SpringCloud? SpringCloud是一系列框架的有序集合,它利用SpringBoot的开发便利性简化了分布式系统的开发,比如服务发现.服务网关.服务路由.链路追踪等.Sprin ...
- Python脚本:实现对象集合List导入到excel表格,支持mysql,postergrsql,MongoDB
import xlwt import os import datetime #验证export_filed中的字段是否在对象字段中 def checkField(obj_list,filed_dict ...