vue中$on是什么意思?

$on

vm.$on( event, callback )

参数:

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

  • {Function} callback

用法:

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

$emit

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

参数:

  • {string} eventName

  • [...args]

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

特别注意:$emit$on的事件必须在一个公共的实例上,我们可以使用一个空的 Vue 实例作为中央事件总线。

代码示例

main.js中,创建一个空的vue实例作为事件总线,为方便调用并绑定到原型中

Vue.prototype.$player = new Vue();

在music组件中的mounted中注册监听

<template>
  <div id="rv">
    <h1 @click="play">{{ music }}</h1>
    <audio controls :src=src ref="musicplayer"></audio>
  </div>
</template>
<script>
import src from '../components/taikongchuan.mp3';
export default {
    data() {
        var data = {
            src: src,
            music: '音乐状态'
        };
        return data;
    },
    methods: {
        play(val) {
            this.music = '播放';
            this.$refs.musicplayer.play();
        },
        pause(val) {
            this.music = '暂停';
            this.$refs.musicplayer.pause();
        }
    },
    mounted() {
        // 监听 play 事件
        this.$player.$on('play', res => {
            this.play();
        });
        // 监听 pause 事件
        this.$player.$on('pause', this.pause);
    }
};
</script>

在app.js中,注册music组件

<template>
  <div id="rv">
    <music />
    <transition :name="transitionName">
      <router-view></router-view>
    </transition>
  </div>
</template>
<script>
import music from './pages/music';
export default {
    components: {
        music
    },
    data() {
        return {};
    }
};
</script>

home中$emit触发监听

<template>
  <div>
    <div id="capture">
      <h1 @click="playmusic">播放音乐</h1>
<h1 @click="pausemusic">暂停音乐</h1>
    </div>
  </div>
</template>
<script>
export default {
    methods: {
        playmusic() {
            console.log(this.$player);
            this.$player.$emit('play', '参数');
        },
        pausemusic(){
            this.$player.$emit('pause', '暂停参数');
        }
    },
};
</script>
<style>
</style>

更多前端开发知识,请查阅 HTML中文网 !!

以上就是vue中$on是什么意思?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏