vue兄弟组件通信不使用vuex

App.vue

<template>
    <div id="app">
        <showregister></showregister>
        <register></register>
    </div>
</template>

<script>
    import register from './components/register';
    import showregister from  './components/showregister';
    export default {
        name: 'app',
        components: {
            showregister,
            register
        }
    };
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

eventBus.js

import Vue from 'vue';
export default new Vue({});

1
2

showregister.vue

<template>
    <div>
        <button @click.stop.prevent="showregister">showregister</button>
    </div>
</template>

<script>
    import eventBus from './eventBus';
    export default {
        name: 'showregister',
        methods: {
            showregister: function () {
                eventBus.$emit('click');
            }
        }
    };
</script>

<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<template>
    <div v-show="showModel">
        registerModel
    </div>
</template>
<script>
    import eventBus from './eventBus';
    export default {
        name: 'register',
        data() {
            return {
                showModel: true
            };
        },
        created() {
            eventBus.$on('click', () => {
                this.showModel = true;
            });
        }
    };
</script>
<style scoped>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

TOC