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 ...
随机推荐
- Oracle触发器之替代触发器
替代触发器 替代视图增删改操作.视图可以认为成逻辑上的一张表,类似于把一个sql语句的执行结果永久的像表存储到数据 库中,视图一般用来做查询. 创建视图的语法: create view 视图名称 as ...
- Spring官网阅读(十一)ApplicationContext详细介绍(上)
文章目录 ApplicationContext 1.ApplicationContext的继承关系 2.ApplicationContext的功能 Spring中的国际化(MessageSource) ...
- 【FPGA技巧篇一】FPGA设计的四种常用思想与技巧之一 :乒乓操作
本文篇章将讨论一下的四种常用 FPGA 设计思想与技巧: 乒乓操作. 串并转换. 流水线操作. 数据接口同步化, 都是 FPGA 逻辑设计的内在规律的体现, 合理地采用这些设计思想能在FPGA设计工作 ...
- Redis 学习笔记(一) 字符串 SDS
SDS 简单动态字符串. SDS的结构: struct sdshdr{ int len;//记录BUF数组中已使用字节的数量 ,等于SDS所八寸字符串的长度 int free;//记录BUF数组中未使 ...
- MySQL 主从复制原理及过程讲解
mysql主从原理描述,摘自老男孩. 下面简 单描述下 MySQL Replication 复制的原理及过程 . 1.在 Slave 服务器上执行 start slave 命令开启主从复制开关,主从复 ...
- css段落样式
字间距 letter-spacing 首行缩进 text-indent
- android Viewpager禁用/开启滑动切换功能
要实现viewpager的滑动以及禁止滑动切换功能只需要继承viewpager,在onTouchEvent进行逻辑判断即可(网上搜到的,确实可行,原创地址不明),下面自己实现一个 import and ...
- onmouseenter,onmouseleave,onmouseover,onmouseout的区别
首先,这四个事件两两配对使用,onmouseenter.onmouseleave一对,onmouseover.onmouseout一对,不能混合使用. onmouseenter 和 onmousele ...
- css 箭头三角形
1.向下的三角形 .down{ display:inline-block; width:0px; height:0px; border-top:8px solid rgba(0, 0, 0, 0.65 ...
- Redis学习笔记(十二) 复制(上)
偷个懒,晚上工作忙的太晚,整个复制功能的内容还没有写完,这里先说一下复制功能的简单应用. 在Redis中,用户可以通过执行SLAVEOF命令或者设置slaveof选项,让一个服务器去复制另一个服务器, ...