vue中html有什么用,vue中$on是什么意思？

$onvm.$on( event, callback )

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

{Function} callback

用法：

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

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

参数：{string} eventName

[...args]

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

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

代码示例

main.js中，创建一个空的vue实例作为事件总线，为方便调用并绑定到原型中Vue.prototype.$player = new Vue();

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

{{ music }}

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);

}

};

在app.js中，注册music组件

import music from './pages/music';

export default {

components: {

music

},

data() {

return {};

}

};

home中$emit触发监听

播放音乐

暂停音乐

export default {

methods: {

playmusic() {

console.log(this.$player);

this.$player.$emit('play', '参数');

},

pausemusic(){

this.$player.$emit('pause', '暂停参数');

}

},

};

更多前端开发知识，请查阅 HTML中文网 ！！