Vue关于$on和$emit的理解

我们再项目中经常会遇到这么些情况，兄弟组件之间的传值。
比如说一个组件内的按钮触发了兄弟组件的<audio>标签，从而播放背景音乐。另一个组件触发了暂停，从而暂停背景音乐。
这个时候就会用到$on和$emit了。

一.理解$on,$emit

$emit

1、this.$emit（'自定义事件名',要传送的数据）；
2、触发当前实例上的事件，要传递的数据会传给监听器；

$on

1、VM.$on('事件名',callback) ---callback回调$emit要传送的数据；
2、监听当前实例上自定义事件；

特别注意：$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 class="Router"></router-view></transition></div>
</template>
<script>
import music from './pages/music';
export default {components: {music},data() {return {};}
};
</script>

home中$emit触发监听

<template><div class="wrap"><div id="capture" class="test"><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 lang="less">
</style>

4人点赞

日记本

Vue关于$on和$emit的理解相关推荐

[vue] 说说你对vue组件的设计原则的理解
[vue] 说说你对vue组件的设计原则的理解第一: 容错处理, 这个要做好, 极端场景要考虑到, 不能我传错了一个参数你就原地爆炸第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值第三 ...
[vue] 说说你对slot的理解有多少？slot使用场景有哪些？
[vue] 说说你对slot的理解有多少?slot使用场景有哪些? 通过插槽可以让用户可以拓展组件,去更好地复用组件和对其做定制化处理如果父组件在使用到一个复用组件的时候,获取这个组件在不同地方有少量 ...
[vue] 说说你对keep-alive的理解是什么？
[vue] 说说你对keep-alive的理解是什么? keep-alive是Vue提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM ...
[vue] 说说你对proxy的理解
[vue] 说说你对proxy的理解 vue的数据劫持有两个缺点: 1.无法监听通过索引修改数组的值的变化 2.无法监听object也就是对象的值的变化所以vue2.x中才会有$set属性的存在pr ...
vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template><div id="app"><input type="button&q ...
vue中 .sync 修饰符个人理解
vue中.sync修饰符有什么用 .sync 修饰符其实就是一个语法糖 vue中 :子组件不能修改props 外部数据 vue中: $emit 可以触发事件并传参 vue中: $event可以获取 ...
vue为p标签_通过vue.js几个基本操作，理解一下什么是插槽「606」
更多的文章,请关注我的头条号,我是落笔承冰. 一.先创建一个test1.html文件,还是得在head里链接vue的库. 二.创建一个父组件一个全局子组件. 三.给子组件添加模板吧,然后在父组件里显示 ...
vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
Vue中slot与slot-scope的理解及使用
以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot. 但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资 ...

Vue关于$on和$emit的理解

Vue关于$on和$emit的理解

$emit

$on

Vue关于$on和$emit的理解相关推荐

最新文章

热门文章