父子组件的信息传递无碍就是父组件给子组件传值(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. 洛咕 P4474 王者之剑

    宝石只能在偶数秒取到,假设有一个宝石在奇数秒取到了,那么上一秒是偶数秒,在上一秒的时候这里的宝石就没了. 相邻的两个宝石不能同时取,很显然,先取一块,那么这是偶数秒,取完了这一块之后相邻的都没了. 只 ...

  2. C#精华面试题及答案 三

    PS.学了两三年的软件开发到头来发现连一些基本的东西都没掌握,通过面试题来检验自己的水平,让学习变得更加有方向性,也为将来择业而打下基础,不至于到时候手忙脚乱. 一.选择,填空题 1. 在ADO.NE ...

  3. [计算机视觉] 图像拼接 Image Stitching

    [计算机视觉] 图像拼接 Image Stitching 2017年04月28日 14:05:19 阅读数:1027 作业要求: 1.将多张图片合并拼接成一张全景图(看下面效果图) 2.尽量用C/C+ ...

  4. kubeadm安装kubernetes 1.13.1集群完整部署记录

    k8s是什么 Kubernetes简称为k8s,它是 Google 开源的容器集群管理系统.在 Docker 技术的基础上,为容器化的应用提供部署运行.资源调度.服务发现和动态伸缩等一系列完整功能,提 ...

  5. Android与Unity相互调用

    1. 在Unity里调用Android代码: void OnGUI(){ AndroidJavaClass jc = new AndroidJavaClass("com.some.packa ...

  6. hadoop balance工具平衡集群dfs存储及遇到异常Got error, status message Not able to receive block 1073959989 from /192.168.1.37:3004 because threads quota is exceeded

    hadoop集群某个节点dfs存储比其他节点存储高时,一般会使用hadoop提供的balance(start-balancer.sh -threshold 10 )工具来移动高存储节点上的块到低存储节 ...

  7. PAT甲题题解-1021. Deepest Root (25)-dfs+并查集

    dfs求最大层数并查集求连通个数 #include <iostream> #include <cstdio> #include <algorithm> #inclu ...

  8. git学习心得(1)

    这次是第一次用git这个平台,还非常不熟练,尤其是在上传代码的步骤上,有好几次都出了问题,多次询问了同学才将代码上传到平台上,git是一个分布式版本控制系统,相对于集中式的来说具有很多优点,但是中文资 ...

  9. 『编程题全队』Alpha 阶段冲刺博客Day5

    1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.完成SlotWidget的设计和功能 2.修改了TitleBar上的功能按钮的CSS样式表 孙慧君: 1.登录框的UI设计 2 ...

  10. Docker(二)-Docker安装

    官方文档:https://docs.docker.com/ Docker 支持多平台的安装(Linux/Windows/OS X). 因为Docker原生支持Linux,所以,可以直接在Linux上运 ...