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 ...
随机推荐
- 微信小程序下拉刷新时有部分区域不随着下拉移动
问题 区域元素使用(position: fixed),小程序页面下拉刷新时,这部分区域不会随页面下拉移动. 如何解决 删除设置的top属性
- Vue + Element-ui实现后台管理系统(3)---面包屑 + Tag标签切换功能
面包屑 + Tag标签切换功能 有关后台管理系统之前写过两遍博客,看这篇之前最好先看下这两篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-system 1.V ...
- Day_12【集合】扩展案例2_键盘录入一个字符串,对其进行去重,并将去重后的字符串组成新数组
需求分析:键盘读取一行输入,去掉其中重复字符, 打印出不同的那些字符 思路: 1.键盘录入字符串 2.遍历字符串,将每个字符存储到集合中 3.将集合中重复的字符去掉 4.创建新集合,遍历老集合,获取老 ...
- 自动化测试po模式是什么?自动化测试po分层如何实现?-附详细源码
一.什么是PO模式 全称:page object model 简称:POM/PO PO模式最核心的思想是分层,实现松耦合!实现脚本重复使用,实现脚本易维护性! 主要分三层: 1.基础层BaseP ...
- leetcode-4. 寻找两个正序数组的中位数
leetcode-4. 寻找两个正序数组的中位数. 给定两个大小为 m 和 n 的正序(从小到大)数组 nums1 和 nums2. 请你找出这两个正序数组的中位数,并且要求算法的时间复杂度为 O(l ...
- C# 数据操作系列 - 4. 自己实现一个ORM
0. 前言 在之前的几篇内容中,我们了解了如何通过ADO.NET 访问数据库,如何修改.新增数据.如何通过DataSet和DataAdapter获取数据,我们将在这一篇试试自己实现一个简单的ORM框架 ...
- Python --元组与列表的差异
· Python中的元组与列表类似,不同之处是元组的元素不能修改 · 元组使用小括号,不使用括号也可以,列表使用方括号 for example:
- phantomJS安装出错解决办法
解决办法:https://github.com/xhlwill/blog/issues/11
- Oracle百万数据查询语句
SELECT * FROM (SELECT e.*, ROWNUM rn FROM (SELECT id, name, age, birthDate, sex, describe, city, cre ...
- Chipmunk-js物理引擎学习笔记
一.基本概念## 空间:在Chipmunk中,空间是所有对象容器.因此,刚体.形状.链接节点等对象都需要添加到空间中.空间控制这些对象的相互作用. 刚体:物理上的刚体指的是在运动和受力作用后,形状和大 ...