解决方案BUS总线/发布订阅

代码:

<!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>非父子组件的传值</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <child content="范飞飞"></child>
        <child content="温清夜"></child>
    </div>
    <script>
        Vue.prototype.bus = new Vue()

        Vue.component('child', {
            props: ['content'],
            data: function() {
                return {
                    number: this.content
                }
            },
            template: '<div @click="handClick">{{number}}</div>',
            methods: {
                handClick: function() {
                    this.bus.$emit('change', this.number)
                }
            },
            mounted() {
                let this_ = this
                this.bus.$on('change', function(msg) {
                    this_.number = msg
                })
            },
        })

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

</html>

首先在Vue的原型上添加bus事件

Vue.prototype.bus = new Vue()

在HTML中显示的时候二个兄弟组件范飞飞和温清夜.
在子组件中，props收到父组件传给的数值范飞飞和温清夜的时候，一定要另找变量将父组件穿过来的数组给代替。

该方法主要是在钩子函数的挂载上做文章
点击一个child的时候，另一个child也会变成点击的child