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 ...
随机推荐
- Hadoop日记Day6---Linux的常用命令
一.系统操作(开机.关机.登陆等)命令 选项名称 使用格式 含义 reboot 输入回车即可 立刻重启 shutdown shutdown –r now 立刻重启 shutdown –r 20: ...
- kubernetes(k8s) 的常用命令
1.查询副本[root@master ~]# kubectl get pods2.删除一个副本[root@master ~]# kubectl get pods 3.启动一个容器副本[root@mas ...
- VMware在Centos7上配置静态IP的方法
使用NAT模式 在这里记下192.168.161.2 进入系统,为系统自动分配一个ip 记录下 192.168.161.129 进入网络管理器配置文件目录 cd /etc/sysconfig/netw ...
- 基于tensorflow使用全连接层函数实现多层神经网络并保存和读取模型
使用之前那个格式写法到后面层数多的话会很乱,所以编写了一个函数创建层,这样看起来可读性高点也更方便整理后期修改维护 #全连接层函数 def fcn_layer( inputs, #输入数据 input ...
- 数据库——SQL数据单表查询
数据查询 语句格式 SELECT [ALL|DISTINCT] <目标列表达式> [,<目标列表达式>] … FROM <表或视图名>[,<表或视图名&g ...
- 基于SSH框架的学生选课质量属性分析
系统:学生选课系统 框架:SSH(Struts2+Spring+Hibernate) 我做的是基于SSH框架的学生选课系统.学生选课系统的特性:①系统响应时间短,能够快速调出课程数据供学生选课提交.② ...
- 第二个Sprint冲刺第 七天(燃尽图)
- PAT 甲级 1085 Perfect Sequence
https://pintia.cn/problem-sets/994805342720868352/problems/994805381845336064 Given a sequence of po ...
- formidable模块的使用
Node.js的Formidable模块的使用 今天总结了下Node.js的Formidable模块的使用,下面做一些简要的说明. 1) 创建Formidable.IncomingForm ...
- [转帖]Portainer -- Docker可视化管理工具的安装配置及使用
原贴地址:https://blog.csdn.net/A632189007/article/details/78779920 Portainer介绍 Portainer是Docker的图形化管理工具, ...