父组件:

<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. 关于LP64,ILP64,LLP64,ILP32,LP32字长(数据)模型

    太长不看: 1.32位Windows和类Unix使用ILP32字长模型,64位Windows使用ILP64模型,64位类Unix使用LP64字长模型. 2.根据1,long在32位和64位Window ...

  2. 001---mysql

    Mysql数据库 数据库相关概念 数据库服务器:运行数据管理软件的计算机 数据库:顾名思义数据仓库,是一个文件夹.存储多个文件(数据表) 数据表:对应一个文件,存储在数据库下 数据:对应文件中的每一行 ...

  3. UCSC 工具链接

    http://hgdownload.cse.ucsc.edu/admin/exe/linux.x86_64/

  4. 138. Subarray Sum【Lintcode,by java】

    Description Given an integer array, find a subarray where the sum of numbers is zero. Your code shou ...

  5. python3出现转码问题的总结

    对于此(类)问题: (1)出现UnicodeEncodeError –> 说明是Unicode编码时候的问题: (2) ‘gbk’ codec can’t encode character –& ...

  6. Repo 的使用小结

    一.安装 创建目录和修改环境变量 $ mkdir ~/bin $ PATH=~/bin:$PATH 下载repo代码 $ curl https://storage.googleapis.com/git ...

  7. 跨域发送HTTP请求详解

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述几种跨域发HTTP请求的几种方法,POST请求,GET请求 目录: 一,采用JsonP的方式(只能 ...

  8. StringUtils工具类用法

    /*1.字符串以prefix开始*/ StringUtils.startsWith("sssdf","");//结果是:true StringUtils.sta ...

  9. nuget必备插件(待续)

    DevLib.ExtensionMethods Extend Z.ExtensionMethods

  10. 用树莓派Raspberry Pi和Micro:bit做一个自拍器

    在这个项目中,我们将使用Python来构建一个由Micro:bit触发树莓派Raspberry Pi和相机模块的自拍器.这是开始使用硬件和简单文本编程的好方法. 我们将学习: 如何设置Raspberr ...