[Vue]组件——通过$emit为组件自定义事件

1.在定义组件时调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件enlarge-text：

Vue.component('blog-post', {props: ['post'],template: `<div class="blog-post"><h3>{{ post.title }}</h3><button v-on:click="$emit('enlarge-text')">Enlarge text</button><div v-html="post.content"></div></div>`
})

代码解释：<button v-on:click="$emit('enlarge-text')">：监听click事件，click事件被触发时触发enlarge-text事件

2.用 v-on 在上述组件上监听这个事件，就像监听一个原生 DOM 事件一样：

<blog-post...v-on:enlarge-text="postFontSize += 0.1"
></blog-post>

代码解释：v-on:enlarge-text：监听enlarge-text事件，enlarge-text事件被触发时执行postFontSize += 0.1

详情见官网：https://cn.vuejs.org/v2/guide/components.html

转载于:https://www.cnblogs.com/vickylinj/p/9577797.html

[Vue]组件——通过$emit为组件自定义事件相关推荐

【Vue 快速入门系列】Vue数据实现本地存储、自定义事件绑定、全局事件总线、$nextTick的使用
文章目录一.本地存储 1.概念 2.接口 3.实际操作二.自定义事件绑定 1.自定义事件使用过程 2.绑定自定义事件的语法 3.其他注意事项三.全局事件总线 1.全局事件总线概念 2.全局事件总 ...
【vue大师晋级之路第二集：深入了解组件】第3章——自定义事件
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果触发一个 camelCase 名字的事件: this.$emit( ...
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
【视频】vue组件之$emit父子组件间值的传递
Vue.js 从入门到真精通视频合集 https://www.bilibili.com/video/av91679349?p=10
【Day13】说一下 Vue 组件的通信方式都有哪些？（父子组件，兄弟组件，多级嵌套组件等等）
说一下 Vue 组件的通信方式都有哪些?(父子组件,兄弟组件,多级嵌套组件等等) 一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件传值四.跨组件一.父组件向子组件传值 1.1 prop ...
html 自动触发事件,js自动触发事件自定义事件
在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件 ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue 3 父子组件传递数据的几种通信方式 (Prop、自定义事件、v-model...)
Vue 3 官方文档 (中文):https://v3.cn.vuejs.org/guide/introduction.html 对比 Vue 2 的一些变化 v-on 的 .native 修饰符已被移 ...

[Vue]组件——通过$emit为组件自定义事件

[Vue]组件——通过$emit为组件自定义事件相关推荐

最新文章

热门文章