父组件:

<template>
<div>
<my-child abcClick="sayHello"></my-child>
</div>
</template> <script>
export default {
method: {
sayHello(Num,Str) {
alert('hello world~~' + Num + Str)
}
}
}
</script>

子组件:

<template>
<div>
<!--例如最简单的封装一个按钮-->
<button @click="childClick"></button>
</div>
</template> <script>
export default {
data: {
return{
myNum: 456,
myStr: 'haha'
}
},
method: {
childClick() {
this.$emit('abcClick', this.myNum, this.myStr)
}
}
}
</script>

核心就是通过$emit来触发自定义事件(不需要注册),并且传值出去

【vue】vue组件的自定义事件的更多相关文章

  1. vue子组件的自定义事件

    父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...

  2. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  3. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  4. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

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

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

  6. vue -- 父子组件间的事件触发

    1.父组件触发子组件事件 Parent.vue <child ref="child"></child> <div @click="fn&qu ...

  7. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  8. vue 给组件绑定原生事件

    有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...

  9. 子组件通过 $emit 触发父组件的自定义事件

    子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...

随机推荐

  1. Verilog的一些系统任务(二)

    $monitor 任务$monitor提供了监控和输出参数列表中的表达式或变量值的功能. 格式: $monitor(p1,p2,...,pn);   $monitor;        $monitor ...

  2. 数据结构与算法之排序(2)选择排序 ——in dart

    选择排序的算法复杂度与冒泡排序类似,其比较的时间复杂度仍然为O(N2),但减少了交换次数,交换的复杂度为O(N),相对冒泡排序提升很多.算法的核心思想是每次选出一个最小的,然后与本轮循环中的第一个进行 ...

  3. 2015521 实验四 Android程序设计

    <JAVA程序设计> 20155214 实验四 Android程序设计 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android.组件.布局管 ...

  4. 20155301 Makefile和MyOD和共享库

    20155301 Makefile和MyOD和共享库 Makefile 作用:make命令执行时,需要一个 Makefile 文件,以告诉make命令需要怎么样的去编译和链接程序. 我们要写一个Mak ...

  5. # 20155337 2016-2017-2 《Java程序设计》第九周学习总结

    20155337 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第16章 JDBC(Java DataBase Connectivity)即java数据库连 ...

  6. 数据结构思维导图 Part1

    刚刚结束数据结构的学习,在复习阶段,所以做来思维导图总结一下. 思维导图,顾名思义是应该有对思维有引导作用的,就像思维的整理术,然而想要学好什么,光看思维导图总是不够的. 树与图作为两个复杂非线性结构 ...

  7. IAR里面STM32工程使用printf

    1. 首先打开工程的options设置 2. 设置编译器的预宏定义,添加宏定义_DLIB_FILE_DESCRIPTOR 3. 修改文件DLib_Defaults.h DLib_Defaults.h ...

  8. 类的扩展之 DataReader的扩展

    看了关于DataReader的扩展,发现能节省很多代码.从数据库读取数据最原始方法就是while()然后做循环,如果数据库添加一个字段那么你所有读取数据库的方法全部添加.通过扩展这个类就摆脱了这种令人 ...

  9. Mac系统STF自动化环境搭建及部署踩坑记录

    因为公司需要寻找一个免root的自动化测试方案,所以以前做的老方案需要被替代.一阵搜寻找到了这个框架,但是部署起来很是折腾,搞了一下午终于搞定,顺便记录一下过程,有需要的自取. 转载请注明出处:htt ...

  10. halcon学习相关资料(转载)

    https://blog.csdn.net/maweifei/article/details/78162581 论坛.培训 halcon学习网:http://www.ihalcon.com/ 鸟叔机器 ...