非父子组件的数据传递

最新推荐文章于 2022-03-15 10:45:22 发布

原创最新推荐文章于 2022-03-15 10:45:22 发布 · 661 阅读

0 ·

CC 4.0 BY-SA版权

本文为博主原创文章，转载请注明出处。

文章标签：

#Vue #非父子组件的数据传递 #emit

前端专栏收录该内容

72 篇文章

订阅专栏

复制代码可以直接查看效果

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