vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(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子组件的自定义事件的更多相关文章
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- vue子组件向父组件传值
vue2.0中通过$emit事件在子组件中自定义事件,通过操作子组件中的事件,向父组件传递参数: 首先写一个叫做parentComp.vue的父组件: <template> <div ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- Vue 子组件调用父组件 $emit
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Vue:子组件如何跟父组件通信
我们知道,父组件使用 prop 传递数据给子组件.但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了. 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口,即 ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- Vue子组件调用父组件的方法
Vue子组件调用父组件的方法 Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...
随机推荐
- [Deep-Learning-with-Python]基于Keras的房价预测
预测房价:回归问题 回归问题预测结果为连续值,而不是离散的类别. 波士顿房价数据集 通过20世纪70年代波士顿郊区房价数据集,预测平均房价:数据集的特征包括犯罪率.税率等信息.数据集只有506条记录, ...
- 【绝对给力】Android开发免豆资料(教程+工具+源码)地址汇总
教程下载: [免费]android界面效果全汇总.pdf http://down.51cto.com/data/209179 Android终极开发教程[pdf高清版] http://down.51c ...
- 通过Mysql连接ASP.Net Core2.0(Code First模式)
ASP.NET Core2.0连接Mysql,首先新建项目 选择Web应用程序 选择需要身份验证: 通过Nuget安装Mysql驱动,这里推荐>Pomelo.EntityFrameworkCor ...
- HTML 背景实例
71.HTML 背景实例好的背景使站点看上去特别棒.背景(Backgrounds)<body> 拥有两个配置背景的标签.背景可以是颜色或者图像.<body> 标签中的背景颜色( ...
- centos7 RabbitMQ部署
一.RabbitMQ简单介绍在日常工作环境中,你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务 ...
- 阿里云ubuntu16.04安装ruby
0x0 准备 环境:阿里云轻量服务器ubuntu16.04 目的:安装beef需要的ruby环境 更新软件 sudo apt-get update sudo apt-get upgrade sudo ...
- oozie 编译与安装
oozie:4.3.1 hadoop 2.7.6 hive编译使用2.0.0参与编译不通过,但是可以指定为1.2.0,编译可以通过,后期不使用hive的action即可(也可以使用,但是可能会出现异 ...
- Alpha阶段个人贡献分
根据任务完成情况与之前的评分标准,我们给组员分数如下: 团队成员 最终得分 程刚 49 李睿琦 50 刘丽萍 52 刘宇帆 53 王力民 54 杨昊岚 41 左少辉 51 转会人员: 杨昊岚转到Our ...
- 【Beta阶段】启程会议——第零次Scrum Meeting!
本次会议为Beta阶段功能的概括性介绍与任务主线的确定会议. 本次会议拟确定第二阶段各位队员的内容与主要职责 会议时长:1小时30分(因为是启程会议,所以说的比较多) 会议地点:7公寓1楼会客室 ...
- Day Nine
站立式会议 站立式会议内容总结 331 今天:学习plupload 遇到问题:无 明天:学习中文分词 442 今天:解决gradle以及项目计划页面的bug 遇到的问题:调用工具类以及配置gradle ...