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. Rtmp AAC基本格式(转)

    第一个audio data包:AAC sequence header 第二个audio data包:AAC raw AF表示的含义: 1)第一个字节af,a就是10代表的意思是AAC, Format ...

  2. RAM: Residual Attention Module for Single Image Super-Resolution

    1. 摘要 注意力机制是深度神经网络的一个设计趋势,其在各种计算机视觉任务中都表现突出.但是,应用到图像超分辨领域的注意力模型大都没有考虑超分辨和其它高层计算机视觉问题的天然不同. 作者提出了一个新的 ...

  3. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_01 Collection集合_6_迭代器的实现原理

  4. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_02 泛型_3_定义和使用含有泛型的类

    创建一个类,添加一个name的属性,然后生成get和set 使用上面创建的类 使用泛型 所以我们取出来也是一个Object的类型 定义的时候规定的类型是Integer,所以这里setName设置的时候 ...

  5. python读写ini配置文件

    像邮箱等信息是可以写在配置文件里面的,python有一个配置模块ConfigParser,可以处理配置文件信息 目录 1.配置模块ConfigParser 2.基本应用 1.配置模块ConfigPar ...

  6. 删除C:\Program Files (x86)\Common Files\baidu 等误装软件且正常模式删不掉的文件夹

    ---------方法一-------- C:\Program Files\Common Files\Baidu\BaiduProtect\1.1.0.26打开以上路径找到反注册程序uninst.ex ...

  7. Hbse笔记

    1 角色    HMaster    RegionServer        Region:一张table        Hbase为了读写高效 有二级缓存,内存的缓存和磁盘的缓存        HL ...

  8. Haddop的数据计算部分原理

    import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import o ...

  9. Python笔记(二十三)_魔法方法_字符串的魔法方法

    __str__和__repr__ 如果要把一个类的实例变成字符串,就需要实现魔法方法__str__()和__repr__ >>>class A: def name(self): re ...

  10. Queen Attack -- 微软2017年预科生计划在线编程笔试第二场

    #!/usr/bin/env python # coding:utf-8 # Queen Attack # https://hihocoder.com/problemset/problem/1497 ...