非.vue单文件组件通信问题

Question

在没有使用.vue单文件的情况下，
我想点击 profile 组件里面按钮，使模态框组件显示出来，主要是修改根实例的showModal值，
开始想使用prop，发现我这个情况好像没有找到合适的列子，
使用事件发射器，不知道具体怎么使用

html 主要结构如下

<div id="app">
    ...
    <router-view></router-view>
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
    <!--
        you can use custom content here to overwrite
        default content
    -->
    <h3 slot="header">custom header</h3>
    </modal>
</div>
<script type="text/x-template" id="profile">
    <button @click="togleModal"></button>
</script>
<script type="text/x-template" id="modal-template">
<transition name="modal">
    <div class="modal-mask">
    <div class="modal-wrapper">
        <div class="modal-container">
        <div class="modal-footer">
            <button class="modal-default-button" @click="$emit('close')">
                OK
            </button>
        </div>
        </div>
    </div>
    </div>
</transition>
</script>

js 如下，精简了一下

    var bus = new Vue();
    // register modal component
    Vue.component('modal', {
        template: '#modal-template'
    });
    var profile = {
        template: '#profile',
        data: function(){
            return {
            };
        },
        created: function () {
            bus.$on('show-modal', function(flag){  //获取传递的参数并进行操作
                //todo something
                console.log(flag);
            });
        },
        methods: {
        }
    };

    var routes = [
        {path: '/'},
        {path: '/profile', component: profile}
    ];
    var ROUTER = new VueRouter({
        routes: routes
    });
    var App = new Vue({
        el: '#app',
        data: {
            showModal: false,
            uinfo: {}
        },
        created: function () {
            bus.$emit('show-modal', this.showModal);
        },
        methods: {
            goProfile: function(){
                this.$router.history.push('/profile');
            }
        },
        watch: {
            '$route': function(to, from) {
               console.log(this.$route.path);
            }
        },
        router: ROUTER,
    });

Answer 1

其实你只是需要组件通信？举个栗子
http://jsfiddle.net/631807682...

Answer 2

好了，之前逻辑没理好，在事件中心上面花了较长事件，参考文档
模态框是照搬的官方示例，就是把点击打开模态框的按钮放到vue-router下面的组件里面了，
组件里面按钮点击通过$emit分发事件，
根实例里面通过$on接收事件，修改showModal值为true，模态框就显示出来了

更改的后js

var bus = new Vue();
// register modal component
Vue.component('modal', {
    template: '#modal-template'
});
var profile = {
    template: '#profile',
    data: function(){
        return {
        };
    },
    created: function () {
    },
    methods: {
        /******************/
        togleModal: function(){
            bus.$emit('shmodal'); // 分发事件
        }
        /******************/
    }
};

var routes = [
    {path: '/'},
    {path: '/profile', component: profile}
];
var ROUTER = new VueRouter({
    routes: routes
});
var App = new Vue({
    el: '#app',
    data: {
        showModal: false,
        uinfo: {}
    },
    created: function () {
        var _this = this;
        /******************/
        // 接收事件
        bus.$on('shmodal', function(){
            _this.showModal = true;
        });
        /******************/
    },
    methods: {
        goProfile: function(){
            this.$router.history.push('/profile');
        }
    },
    watch: {
        '$route': function(to, from) {
           console.log(this.$route.path);
        }
    },
    router: ROUTER,
});