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 ...
随机推荐
- 基于Boost库的HTTP Post函数
两个函数的区别: 提交表单数据和提交文本数据 表单数据: request_stream << "Content-Type: application/x-www-form-urle ...
- DotNetCore部署(IIS)踩坑记
一.windows系统中Dotnet core runtime 安装后,无法启动次程序,因为计算机中丢失api-ms-win-crt-runtime-l1-1-0.dll的解决方法 错误现象如图 因为 ...
- 解决 div 设为 inline-block 后标题不对齐
vertical-align 属性设置元素的垂直对齐方式.该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐.允许指定负长度值和百分比值.这会使元素降低而不是升高.在表单元格中,这个属性会设置 ...
- R绘图 第五篇:绘制散点图(ggplot2)
ggplot2包中绘制点图的函数有两个:geom_point和 geom_dotplot,当使用geom_dotplot绘图时,point的形状是dot,不能改变点的形状,因此,geom_dotplo ...
- Jmeter目录文件讲解
1.bin:核心可执行文件,包含配置 2.windows启动文件:jmeter.bat mac或linux启动文件:jmeter jmeter-server:mac或linux分布式压测启动文件 jm ...
- 【URLOS应用开发基础】10分钟制作一个nginx静态网站环境应用
URLOS开发者功能已上线有一段时间了,目前通过部分开发者的使用体验来看,不得不说URLOS在服务器软件开发效率方面确实有着得天独厚的优势,凭借docker容器技术与其良好的应用生态环境,URLOS必 ...
- 微软职位内部推荐-Software Development Engineer II_Commerce
微软近期Open的职位: Are you looking for a high impact project that involves processing of billions of dolla ...
- PAT甲题题解-1002. A+B for Polynomials (25)-多项式相加
注意两点:1.系数也有可能加起来为负!!!一开始我if里面判断为>0导致有样例没过...2.如果最后所有指数的系数都为0,输出一个0即可,原本以为是输出 1 0 0.0... #include ...
- PAT甲题题解-1076. Forwards on Weibo (30)-BFS
题目大意:给出每个用户id关注的人,和转发最多的层数L,求一个id发了条微博最多会有多少个人转发,每个人只考虑转发一次.用BFS,同时每个节点要记录下所在的层数,由于只能转发一次,所以每个节点要用vi ...
- Python中的字典详解
https://www.cnblogs.com/yjd_hycf_space/p/6880026.html