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. SpringMVC开发手册

    title: SpringMvc -- 开发手册 date: 2018-11-15 22:14:22 tags: SpringMvc categories: SpringMvc #分类名 type: ...

  2. Understanding RequireJS for Effective JavaScript Module Loading

    Modular programming is used to break large applications into smaller blocks of manageable code. Modu ...

  3. 【后台管理系统】—— Ant Design Pro页面相关(一)

    一.List列表形式 import React, { PureComponent } from 'react'; import { findDOMNode } from 'react-dom'; im ...

  4. React-Native 之 GD (一)目录结构与第三方框架使用与主题框架搭建

    1.APP效果图 2.工程环境配置 IOS: 将压缩包内的 Images.xcassets 文件夹直接替换掉我们iOS工程中的 Images.xcassets 文件夹. 这时候我们可以看到所有图片资源 ...

  5. Java实体类之间的映射(一对一关系)

    如下描述:一个人有有一个身份证 一个身份证只能属于某一个人 /** 一个人有有一个身份证 一个身份证只能属于某一个人 */ class Person{ //人 private String name; ...

  6. 【GTS】关于GtsTetheringTestCases模块的几个失败项

    GTS---关于GtsTetheringTestCases模块的几个失败项 1.run gts -m GtsTetheringTestCases -t com.google.android.tethe ...

  7. GMS认证测试FQA

    ---摘要 本文档用于收录GMS认证测试的异常问题,提供一般性指导.对于本文档中未提供解答的问题请咨询@开发经理或@领域技术专家 cts测试工具如何获取? A:见Google官网 https://so ...

  8. OO第三单元单元总结

    目录 JML知识梳理 部署JMLUnitNG/JMLUnit 按照作业梳理自己的架构设计,并特别分析迭代中对架构的重构 按照作业分析代码实现的bug和修复情况 阐述对规格撰写和理解上的心得体会 JML ...

  9. 浅谈vue$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  10. RD Client、TeamViewer连接主机

    一.使用RD Client连接远程桌面 1.设置本地主机 2.查看电脑ip 3.手机安装RD Client 应用商店下载 Microsoft Remote Desktop PC name填入查询到的I ...