vue事件中心（组件间的数据传递） 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--<script src="https://unpkg.com/vue@2.1.10/dist/vue.js" type="text/javascript" charset="utf-8"></script>-->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <div id="app">

            <component-a>

            </component-a>
            <component-b />
        </div>
        <script>
            var bus = new Vue()
            Vue.component('component-a', {
                template: '<div>This is App Content {{ info }}</div>',
                created() {
                    bus.$on('anotherclick', (res) => {  //接收
                        this.info = res;
                    })
                },
                data: () => {
                    return {
                        info: ''
                    }
                }
            })
            Vue.component('component-b', {
                template: '<div @click="emit">This is Another Content </div>',
                ready: function () {
                    bus.$emit('anotherclick','aaa')//发送
                },
//                mounted: function () {
//                  this.$nextTick(function () {
//                    bus.$emit('anotherclick','aaa')//发送
//                  })
//                }

            })

            

            var vm = new Vue({
                el: '#app'
            })
        </script>
    </body>

</html>

1.兼容vue1.0和2.0 取代$broadcast  $dispatch

2.vue-bus   配合webpack一起使用

https://github.com/yangmingshan/vue-bus

http://div.io/topic/1864

posted @ 2017-01-19 17:42  miumiu316  阅读(2565)  评论(0)    收藏  举报