vue——$emit和$on的用法与$off/$once(实例方法/事件)

原创 minsong 随笔 Vue 90阅读 16 天前 举报

$emit和$on经常会在一起使用,$on是用来监听自定义事件,$emit是用来触发$on的事件,经常用在父子组件通信上。

vm.$emit( event, […args] )
参数:
{string} event
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。

vm.$on( event, callback )
参数:
{string | Array<string>} event (数组只在 2.2.0+ 中支持)
{Function} callback

用法:
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
示例:

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行

案例:
1.子组件

2.父组件

vm.$off( [event, callback] )
参数:
{string | Array<string>} event (只在 2.2.2+ 支持数组)
{Function} [callback]

用法:
移除自定义事件监听器。
如果没有提供参数,则移除所有的事件监听器;
如果只提供了事件,则移除该事件所有的监听器;
如果同时提供了事件与回调,则只移除这个回调的监听器。

vm.$once( event, callback )
参数:
{string} event
{Function} callback

用法:
监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复