2020/08/02 组件间的数据交互_数据联动,跨组件联动-CSDN博客

本文链接：https://blog.csdn.net/qq_44755188/article/details/107746857

一，子组件向父组件传值

上篇说到，子组件直接通过props来拿到父组件的数据，再在数据上添加新数据，实现了子组件向父组件传值，但是这是不被推荐的vue组件间数据传递

上篇也提到想用父组件的方法，可通过$emit()触发，还可以带参数，那不就可以通过参数来让父组件获取子组件的数据吗？，利用参数将子组件的数据传递过去，就可以实现父组件获取子组件的数据

<body>
    <div id="app">
        <com1 :arr='arr' @aaa='hand'></com1>
    </div>
    <template id="com1">
        <div>
            <ul>
                <li v-for='(item,i) in arr' :key='i'>{{item}}</li>
            </ul>
            <button @click="add">添加</button>
        </div>
    </template>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arr: ["aa", 'bb']
        },
        methods: {
            hand(item) {
                this.arr.push(item)
            }
        },
        components: {
            com1: {
                template: '#com1',
                props: ['arr'],
                methods: {
                    add() {
                        this.$emit('aaa', this.sonmsg)
                    }
                },
                data() {
                    return {
                        sonmsg: "子组件调用show方法传递过去的数据",
                    }
                }
            },

        }
    })
</script>

二，兄弟组件之间的交互

通过事件中心来完成触发与监听组件A，B分别通过设置自己的监听函数，和触发事件
如下面例子先new一个vue实列对象作为事件中心,
son1组件通过hub.$on() 来设置自己的监听事件，val 就是兄弟组件触发改监听函数传递过来的值
son1组件设置触发事件通过hub.$emit() 第一个参数是兄弟组件的名，后面参数是要传递给兄弟组件的数据
注意是用hub这个事件中心调用要与父子组件的中使用this.$emit()区别开来
既然可以接收兄弟组件的的参数，那就实现了，可以使用兄弟组件数据以及方法
注销事件 hub.$off("绑定的事件名") 就可以销毁事件

<body>
    <div id="app">
        <button @click="del">销毁事件</button>
        <son1></son1>
        <son2></son2>
    </div>

</body>
<script>
    var hub = new Vue(); //提供事件中心来监听事件
    Vue.component("son1", {
        data() {
            return {
                num: 1,
                aa: 88,
            }
        },
        template: `
        <div>son1 :<button @click="fun">加son2</button>----------{{num}}</div>
        `,
        methods: {
            fun() {
                //来触发对方的监听事件
                hub.$emit("son2-event", this.num, this.aa); //触发对方的监听事件，并将2带过去
            }
        },
        mounted() {
            //数据已经挂载到页面上去了  可以监听事件
            //事件监听
            hub.$on("son1-event", val => {
                //val 是兄弟组件传递过来的数据
                this.num += val;
            })
        }
    });

    Vue.component("son2", {
        data() {
            return {
                num: 1,
            }
        },
        template: `
        <div>son2:<button @click="fun">加son1</button>----------{{num}}</div>
        `,
        methods: {
            fun() {
                hub.$emit("son1-event", this.num); //触发对方的监听事件，并将1带过去
            }
        },
        mounted() {
            //数据已经挂载到页面上去了  可以监听事件
            //事件监听
            hub.$on("son2-event", (val, aa) => { //可以接收多个参数
                //val 是兄弟组件传递过来的数据
                this.num += val;
                console.log(aa);
            })
        }
    });
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            del() {
                hub.$off('son1-event');
                hub.$off("son2-event")
            }
        },
        components: {

        },


    })
</script>