父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit)

之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧~~

实际上挺简单:

父组件:

<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子组件的自定义事件的更多相关文章

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

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

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

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

  3. vue子组件向父组件传值

    vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...

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

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

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

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

  6. Vue 子组件调用父组件 $emit

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  7. Vue:子组件如何跟父组件通信

    我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即 ...

  8. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  9. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

随机推荐

  1. Ansible入门笔记(1)之工作架构和使用原理

    目录 Ansible入门笔记(1) 1.Ansible特性 2.ansible架构解析 3.ansible主要组成部分 1)命令执行来源: 2)利用ansible实现管理的方式 3)Ansile-pl ...

  2. ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  3. 软件测试_Loadrunner_APP测试_性能测试_脚本录制_基本操作流程

    这次主要是写一下使用Loadrunner对APP进行性能测试的基本流程,有关性能测试监控指标请查看链接:软件测试_性能测试_关注点. 先决条件:已安装Loadrunner.如未安装,请查看链接:软件测 ...

  4. A1046. Shortest Distance(20)

    17/20,部分超时. #include<bits/stdc++.h> using namespace std; int N,x,pairs; int a,b; vector<int ...

  5. 微软职位内部推荐-Sr. SE - Office incubation

    微软近期Open的职位: Senior Software Engineer-Office Incubation Office China team is looking for experienced ...

  6. wpf-典型的mvvm模式通用中小型管理系统框架0

    之前就一直在想着写这么一系列博客,将前段时间(也算有点久了)自己编写的一套框架分享下,和园子里的诸位大牛交流交流,奈何文思枯竭,提键盘而无从敲起,看来只有coding时才不会有这种裤子都脱了,才发现对 ...

  7. M1阶段事后分析

    M1阶段的开发结束了,在周四的课上我们组也进行了alpha阶段的汇报.我们的努力得到了应有的回报,下面我们将针对M1阶段产生的一些问题进行分析和反思. 一.设想和目标 1.我们的app更像是一款针对北 ...

  8. 第二次spring冲刺第2天

    今天我们开了个小会,关于讨论开始页面的设计及数据输入的格式限制.运算功能等改善

  9. 第四,五周——Java编写的电梯模拟系统(结对作业)

    作业代码:https://coding.net/u/liyi175/p/Dianti/git 伙伴成员:石开洪 http://www.cnblogs.com/shikaihong/(博客) 这次的作业 ...

  10. ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(三)

    ubuntu18.04配置nvidia docker和远程连接ssh+远程桌面连接(三) 本教程适用于想要在远程服务器上配置docker图形界面用于深度学习的用户. (三)配置远程桌面连接访问dock ...