vue-实例方法 / 事件

vm.$on( event, callback )

参数

{string | Array<string>} event (数组只在 2.2.0+ 中支持)

{Function} callback

用法

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

示例

vm.$on('test',function(msg){console.log(msg)})vm.$emit('test','hi')// => "hi"

vm.$once( event, callback )

参数

{string} event

{Function} callback

用法

监听一个自定义事件,但是只触发一次。一旦触发之后,监听器就会被移除。

vm.$off( [event, callback] )

参数

{string | Array<string>} event (只在 2.2.2+ 支持数组)

{Function} [callback]

用法

移除自定义事件监听器。

如果没有提供参数,则移除所有的事件监听器;

如果只提供了事件,则移除该事件所有的监听器;

如果同时提供了事件与回调,则只移除这个回调的监听器。

vm.$emit( eventName, […args] )

参数

{string} eventName

[...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

示例:

只配合一个事件名使用 $emit:

Vue.component('welcome-button', {template:`

    <button v-on:click="$emit('welcome')">

      Click me to be welcomed

    </button>

  `})

newVue({el:'#emit-example-simple',methods: {sayHi:function(){      alert('Hi!')    }  }})

Click me to be welcomed

配合额外的参数使用 $emit:

Vue.component('magic-eight-ball', {data:function(){return{possibleAdvice: ['Yes','No','Maybe']    }  },methods: {giveAdvice:function(){varrandomAdviceIndex =Math.floor(Math.random() *this.possibleAdvice.length)this.$emit('give-advice',this.possibleAdvice[randomAdviceIndex])    }  },template:`

    <button v-on:click="giveAdvice">

      Click me for advice

    </button>

  `})

newVue({el:'#emit-example-argument',methods: {showAdvice:function(advice){      alert(advice)    }  }})

Click me for advice

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容