Vue2.x-$on,$once,$off以及$emit的使用
$on
使用:vm.$on('事件名称',callback)
说明:监听当前实例(vm)中的自定义事件,事件可以由$emit定义
$once
使用:vm.$once('事件名称',callback)
说明:监听当前实例(vm)中的自定义事件,事件可以由$emit定义,但是只会触发一次,触发后即解除
$off
使用:vm.$off('事件名称')
说明:关闭当前实例中的自定义事件
$emit
使用:vm.$emit('事件名称',args)
说明:自定义事件
代码示例:
子组件: <template> <div> <button @click="clickFn">我是子组件</button> <button @click="removeListener">解除监听</button> </div> </template> <script> export default { created() { this.$on('ChildClickFn', arg => { console.log('我是用$on监听事件并触发的,子组件的clickFn被执行了,参数是:', arg); }); this.$once('ChildClickFn', arg => { console.log('我是用$once监听事件并触发的,参数是:', arg); }); }, methods: { clickFn() { this.$emit('ChildClickFn', 'is Child Data'); }, removeListener() { this.$off('ChildClickFn'); console.log('解除监听'); } } }; </script> 父组件: <template> <div> <Test @ChildClickFn="parentClickFn" /> </div> </template> <script> import Test from './views/test3/index'; export default { name: 'App', components: { Test }, methods: { parentClickFn(arg) { console.log('我是父组件,子组件传过来的参数是:', arg); } } }; </script>
效果: