非父子组件的数据传递

来源：互联网发布：查看淘宝店铺在线人数编辑：程序博客网时间：2024/05/21 14:46
复制代码可以直接查看效果
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>    <style type="text/css">    </style></head><body>    <div id="app">    //定义两个组件        <foo></foo>        <bar></bar>    </div>    <script type="text/javascript">    var bus = new Vue()    var foo = {        render: function(creatElement){            return creatElement(                'button',{                    on:{                        click:this.addBar                    }                //设置默认值为count                },this.count            )        },        //这里data必须为函数就不多说了        data: function(){            return {                count: 0,            }        },        methods: {            addBar: function(){                //执行incrementBar事件，注意是事件，不是方法，因为Vue中可以自定义事件                bus.$emit("incrementBar")            }        },        mounted: function(){            //在钩子函数中注册事件，注意这里一定要使用var _this=this。因为这里的this是实例化的对象，而里面的this是注册事件中的上下文            var _this = this            bus.$on('incrementFoo',function(id){                _this.count++            })        }    }    var bar = {        render: function(creatElement){            return creatElement(                'button',{                    on:{                        click: this.addFoo                    }                },this.count            )        },        data: function(){            return {                count: 0            }        },        methods: {            addFoo: function(){                bus.$emit("incrementFoo")            }        },        mounted: function(){            var _this = this            bus.$on('incrementBar',function(){                    _this.count++                })            }    }    var app = new Vue({        el: "#app",        data: {            count: 0,        },        methods: {        },        components: {            'foo': foo,            'bar':bar        }    })    </script></body></html>
阅读全文
0 0