同级组件，只传一个值

来源：4-5 非父子组件间的传值

慕仰5016471

2019-06-06

你好，老师

比如说我现在有三个同级组件，

我现在想点击第一个组件，然后第三个组件的到第一个组件传过来的数据，并且得到改变，可以做到吗？如果可以的话怎么做

写回答

3回答

deepin_linux

2019-07-03

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Counter</title>
    <script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <counter :num="5" :id="1"></counter>
        <counter :num="4" :id="2"></counter>
        <counter :num="3" :id="3" class="main"></counter>
    </div>

    <script>
        Vue.prototype.bus = new Vue();

        Vue.component('counter', {
            props:['num', 'id'],
            template: '<div @click="handelClick">初始值：{{num}}, 修改后：{{number}}</div>',
            data() {
                return {
                    number: this.num,
                }
            },
            methods: {
                handelClick: function() {
                    this.bus.$emit('change', this.num, 3)
                }
            },
            mounted: function () {
                const that = this;
                this.bus.$on('change', function (msg, index) {
                    console.log(index,that);
                    that.id === index? that.number = msg : ''
                })
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                total: 0
            },
        })
    </script>
    <style>
        .main {
            color: red;
        }
    </style>
</body>
</html>

按照老师思路来的。。。