vue兄弟组件通信不使用vuex

Author Avatar
w4ctech 8月7日
  • 在其它设备中阅读本文章

最后更新于2019年08月07日; 如遇到问题,请留言及时通知站长

  1. 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>
  2. eventBus.js

    import Vue from 'vue';
    export default new Vue({});
  3. 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>
  4. register.vue

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

本文链接:https://i.w4ctech.cn/vue/Brother-Component-Communication.html
This blog is under a CC BY-NC-SA 3.0 Unported License