在子组件中触发事件,传值给父组件-vue
1、通过$emit触发事件
在子组件<x-test>中触发事件:
<button @click="toSearchProduct()">搜索</button>
export default {
methods: {
show: function () {
console.log(this.name)
},
toSearchProduct: function () {
this.$emit('parentEvent','哈哈啊哈哈')
}
}
}
父组件:
<x-test :name="username" @parentEvent="toClick"></x-test>
export default {
components: {
XTest
},
methods: {
toClick: function (msg){
console.log(msg) // 当子组件触发按钮时,msg获取值为 哈哈啊哈哈
}
}
}
</script>
在子组件中触发事件,传值给父组件-vue的更多相关文章
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- vue 子组件传值给父组件
子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: <div id="app"> <tmp ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值
前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...
- vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
- Vue中调用另一个组件中自定义事件
之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue--三种组件中之间的传值
参考网址:https://www.jianshu.com/p/46573a741c29 一.父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit ...
- Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件
(标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...
- vue中使用ts后,父组件获取执行子组件方法报错问题
一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...
随机推荐
- WIN7系统JavaEE(java+tomcat7+Eclipse)环境配置
https://jingyan.baidu.com/article/3a2f7c2e62d25e26afd611fa.html WIN7系统JavaEE(java+tomcat7+Eclipse)环境 ...
- /etc/init.d# ./redis-server start
root@ubuntu:/etc/init.d# ll total drwxr-xr-x root root May : ./ drwxr-xr-x root root May : ../ -rwxr ...
- MongoDB学习【二】—MongoDB基础和数据类型
一.MongoDB基础知识 在MongoDB中相关术语的解释和sql术语对应关系 SQL术语/概念 MongoDB术语/概念 解释/说明 database database 数据库 table col ...
- truncate()函数
1 truncate()方法用于截断文件,如果指定了可选参数 size,则表示截断文件为 size 个字符,截断之后 size 后面的所有字符被删除. 参考: https://www.runoob.c ...
- 大数据架构师必读的NoSQL建模技术
大数据架构师必读的NoSQL建模技术 从数据建模的角度对NoSQL家族系统做了比较简单的比较,并简要介绍几种常见建模技术. 1.前言 为了适应大数据应用场景的要求,Hadoop以及NoSQL等与传统企 ...
- C# datatable 与 xml文件之间的转换
/// <summary> /// datatable转XML文件 /// </summary> /// <param name="dtTable"& ...
- linux查找所有文件中某个字符串
查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri "IBM" 查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名 find .|xar ...
- 【ABAP系列】SAP ABAP 用BAPI批量导入物料的质量视图
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP 用BAPI批量导入 ...
- Far and away the best prize that life has given to us is the chance to work hard at work worth doing
work at:侧重于某个工作场所,或者是工作领域内研究 work on:侧重于思想上的从事于某个工作. marvel:n.漫威.奇迹 means.n.方法 tailor.n.裁缝 brighten. ...
- ceph部署-集群建立
一.配置storage集群1.建立集群管理目录(管理配置文件,密钥)mkdir ceph-clustercd ceph-cluster/ 2.创建一个新集群(需要先将主机名加入/etc/hosts 必 ...