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的更多相关文章

  1. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  2. vue 子组件传值给父组件

    子组件通过this.$emit("event",[args,....]),传值给父组件 HTML部分: <div id="app"> <tmp ...

  3. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  4. vue之provide和inject跨组件传递属性值失败(父组件向子组件传值的两种方式)

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  5. Vue中调用另一个组件中自定义事件

    之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...

  6. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  7. vue--三种组件中之间的传值

    参考网址:https://www.jianshu.com/p/46573a741c29 一.父子组件之间的传值----props/$emit 组件之间的传值,我们比较常用到的是props/$emit ...

  8. Vue 编程之路(三)—— Vue 中子组件在父组件的 v-for 循环里,父组件如何调取子组件的事件

    (标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...

  9. vue中使用ts后,父组件获取执行子组件方法报错问题

    一.问题产生背景: 子组件的一个方法: update () { this.$nextTick(() => { this.ul_slots.forEach((ul, cur_slots_index ...

随机推荐

  1. wowza 降低延迟

    转自:http://www.ttstream.com/wowza/live/howToAchieveTheLowestLatencyFromCaptureToPlayback   这篇文章介绍了在用R ...

  2. duliu题之狼抓兔子题解

    拖了将近5天的正解和AC.........emmmmm........... 事实告诉我们这种毒瘤题一定要建双向边(用了不知道多少个小时质疑建边的人欲哭无泪) 心态爆炸的传送 题了个面 这是个求最小割 ...

  3. Ubuntu中几个字符小玩意儿

    1.黑客帝国特效: 打开终端,输入 sudo apt install cmatrix 即可.安装完成后,在终端输入 cmatrix 即可出现特效. 2.奔跑的小火车: 终端输入:sudo apt in ...

  4. 006-spring-data-elasticsearch 3.0.0.0使用【四】-spring-data之Elasticsearch Repositories

    续 二.Elasticsearch Repositories 2.1.简介 2.1.1.Spring命名空间 Spring Data Elasticsearch模块包含一个允许定义存储库bean的自定 ...

  5. Android Framework中Thread类

    Thread类是Android为线程操作而做的一个封装.代码在Thread.cpp中,其中还封装了一些与线程同步相关的类. Thread类 Thread类的构造函数中的有一个canCallJava T ...

  6. github项目分享

    unity 项目合集:https://michidk.github.io/Unity-Script-Collection/ ugui特效:https://github.com/mob-sakai/UI ...

  7. python基础-3 集合 三元运算 深浅拷贝 函数 Python作用域

    上节课总结 1 运算符 in 字符串 判断  : “hello” in "asdasfhelloasdfsadf" 列表元素判断:"li" in ['li', ...

  8. display:table

    display:table的CSS声明能够让一个HTML元素和它的子节点像table元素一样.使用基于表格的CSS布局,使我们能够轻松定义一个单元格的边界.背景等样式,而不会产生因为使用了table那 ...

  9. 项目被os x占用

    xattr -d com.apple.FinderInfo 空格后拖入项目回车就行了

  10. Java可变参数方法

    概念: jdk5.0出现的新特性.将同一个类中,多个方法名相同.参数类型相同.返回类型相同,仅仅是参数个数不同的方法抽取成一个方法,这种方法称为可变参数的方法 好处: 提高代码的重用性和维护性 语法: ...