简单时可用的非父子通信

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo1</title>
</head>

<body>
    <div id="app">
        <my-header></my-header>
        <my-list></my-list>
    </div>
    <script src="vue.js"></script>
    <script>
        var busVM = new Vue();
        var vm = new Vue({
            el: '#app',
            components: {
                'my-header': {
                    template: `<h2>{{message}}</h2>`,
                    data() {
                        return {
                            message: "hello world!!!"
                        };
                    },
                    mounted: function () {
                        busVM.$on('changeEvents', function (str) {
                            console.log(str),
                            this.message=str
                        }.bind(this))
                    },
                },
                'my-list': {
                    template: `<ul>
                                <li @click="getContent" v-for="item in list">
                                    {{item}}
                                </li>
                            </ul>`,
                    data: function () {
                        return {
                            list: ['第一项', '第二项', '第三项']
                        }
                    },
                    methods: {
                        getContent: function (ev) {
                            busVM.$emit('changeEvents', ev.target.innerHTML);
                        }
                    },
                }
            },

        })
    </script>
</body>

</html>

非父子通信

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo2</title>
</head>

<body>
    <div id="app">
        <div>{{count}}</div>
        <my-addbtn :count="count"></my-addbtn>
        <my-removebtn :count="count"></my-removebtn>
    </div>
    <script src="vue.js"></script>
    <script>
        var busVM = new Vue();
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    count: 0
                }
            },
            mounted: function () {
                busVM.$on('changeEvents', function (num) {
                    console.log(num),
                        this.count = num
                }.bind(this))
            },
            components: {
                'my-addbtn': {
                    template: `<button @click="setCount">+</button>`,
                    props: ['count'],
                    methods: {
                        setCount: function () { 
                            busVM.$emit('changeEvents', this.count+1)
                        }
                    },
                },
                'my-removebtn': {
                    template: `<button  @click="setCount">-</button>`,
                    props: ['count'],
                    methods: {
                        setCount: function () {
                            busVM.$emit('changeEvents', this.count-1)
                        }
                    },
                }
            },
        })
    </script>
</body>

</html>