$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是什么意思？的详细内容，更多请关注0133技术站其它相关文章！
