vue中$emit与$on

在做项目中经常会用到$emit与$on，自己通过查找学习后完成了项目，现将学习总结如下：

1.定义全局的：

在app.vue中：

window.Event = new Vue();　　　相当于又new了一个vue实例，Event中含有vue的全部方法；

Event.$on('transitionName', function (msg) {

that.transitionName = msg;

})

接收数据，第一个参数是数据的名字，与发送时的名字对应，第二个参数是一个方法，要对数据的操作

这里是对数据的操作

在其他页面：

Event.$emit('transitionName', 'fold-left'); 发送数据，第一个参数是发送数据的名称，接收时还用这个名字接收，第二个参数是这个数据现在的位置；　

2.定义局部的

我在项目中主要是引用公共头部时用到了

扫描二维码关注公众号，回复： 4536846 查看本文章

<template>
<div style='height:1.8rem;width:100%;background:#fff;position:fixed;top:0px;left:0px;z-index:99;box-shadow: 0px 2px 0px 0px #eee;'>
    <div class='MineDetailTitle'>
        <img src="../img/houtui.png" alt="" style="width:auto;height:20px;margin-right:10px;" @click="returns">
        <span class='top-title'>{{titleName}}</span>
    </div>
    <div class="top-search">
        <div class='search-box'>
            <div class='search-center'>
                <router-link to="/Index" class="imgSrc">
                    <!-- <img src="../img/home.png" alt=""> -->
                </router-link>
                <div class="search">
                    <div style='display:flex;align-items:center;' v-show="isSearch">
                        <img src="../img/menu.png" alt="">
                        <span class="searchText" @click="getSelectPage" >筛选条件</span>
                    </div>
                    <yd-search v-model="mineName" fullpage :on-submit="searchMineName" :on-cancel="searchMineName" cancel-text='搜索' class="search-input" :placeholder=placeholder></yd-search>
                </div>
            </div>
        </div>

    </div>
</div>
</template>

<script>
export default {
    props: {
        titleName: String,
        moduleName: String,
        placeholder: String,
        isSearch: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            mineName: '',
            // isHideSearch: false,
        }
    },
    components: {

    },
    mounted() {},
    methods: {
        returns() {
            Event.$emit('transitionName', 'fold-right');

            this.$router.go(-1);
        },
        searchMineName() {
            this.$emit('mineName', this.mineName); //触发showbox方法，'the msg'为向父组件传递的数据
        },
        getSelectPage() {
            this.$emit('selectPageFlag', 'flag');
        },
    }
}
</script>

<style scoped>

</style>

在其他页面引用时：

 <Header @mineName='getMineName' @selectPageFlag='getSelectPage' :isSearch='isSearch' titleName='服务订单' moduleName='服务订单' placeholder="请输入服务类别"></header>

mineName和selectPageFlag都是通过$emit进行传值的，@加名字即可；

本人也是边学习边进行总结，为的是自己可以真正的掌握，如果有理解有误的地方，欢迎大家评论指出。