父子组件的信息传递无碍就是父组件给子组件传值(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. Codeforces 950D A Leapfrog in the Array (思维)

    题目链接:A Leapfrog in the Array 题意:给出1-n的n个数,从小到大每隔一个位置放一个数.现在从大到小把数往前移动,每次把最右边的数移动最靠右边的空格处直到n个数都在前n个位置 ...

  2. [HNOI2018]转盘[结论+线段树]

    题意 题目链接 分析 首先要发现一个结论:最优决策一定存在一种 先在出发点停留之后走一圈 的情况,可以考虑如下证明: 如果要停留的话一定在出发点停留,这样后面的位置更容易取到. 走超过两圈的情况都可以 ...

  3. Redux系列01:从一个简单例子了解action、store、reducer

    其实,redux的核心概念就是store.action.reducer,从调用关系来看如下所示 store.dispatch(action) --> reducer(state, action) ...

  4. Unity实现简单的AR

    ,本篇是我在博客园上第一次写随笔,有什么不对或者问题可以在评论区留言告诉我哈! 关于AR(增强现实技术(Augmented Reality))简单的概念,在这里就不说了,有兴趣的同学可以上网详细了解, ...

  5. DICOM 协议学习笔记之 How Does DICOM Work ?

    How Does DICOM Work ? DICOM有一套自己自己的模型体系,在进行具体介绍之前,首先讲解下DICOM模型: 在DICOM世界当中,所有的包括患者.检查.医学设备等都可以被视为具有不 ...

  6. 网易云易盾朱星星:最容易被驳回的10大APP过检项

    本文由  网易云发布. 1月20日,“走进网易:移动测试与安全实践”公开活动在杭州西湖区颐高创业大厦4F楼友会创业咖啡厅举行.本次活动的议题聚焦在如何实现应用的高效开发.安全过检.开发功耗降到最低等热 ...

  7. 关于go v1.11安装后出现不能正常运行测试程序的问题

    本人最近安装go1.11后出现上述问题,没有找到原因,可能之前安装过的旧的版本在windows下环境变量设置出现了问题,修改后仍然无效,后来删除所有安装版本,及go环境变量,重新下载1.10版本进行安 ...

  8. Nodejs如何把接收图片base64格式保存为文件存储到服务器上

    app.post('/upload', function(req, res){ //接收前台POST过来的base64 var imgData = req.body.imgData; //过滤data ...

  9. “数学口袋精灵”App的第二个Sprint计划----开发日记

    一.现状 在第一个sprint计划中,我们已经初步完成了“数学口袋精灵”App的基本框架,现在我们要继续完善app,使其功能更加强大,界面更加有趣. 二.任务认领 完成界面后的后续任务: 冯美欣:欢迎 ...

  10. Spring所需的Jar包下载

    作者:zhidashang 来源:CSDN 原文:https://blog.csdn.net/zhidashang/article/details/78706027 版权声明:本文为博主原创文章,转载 ...