vue组件通信总结

父组件 >> 子组建

使用prop父组件Parent.vue

<template>
        <div>
            <child :msg='toChildMsg'></child>
        </div>
    </template>
export default {
        data() {
            return {
                toChildMsg: 'message',
            },
        },
    }

子组件Child.vue

<template>
        <div>
            {{msg}}
        </div>
    </template>
export default {
        props: {
            msg: String, // 这里是传递参数的类型
            default: '默认值', // 这里是默认值
        },
    }

子 >> 父

事件派发

子组件Child.vue

<template>
        <div>
            <button @click='changeParentData'><button>
        </div>
    </template>
export default {
        methods: {
            changeParentData() {
                this.$emit('change', '来自子组件的消息');
            },
        },
    }

父组件Parent.vue

<template>
        <div>
            <child :change='changeData'></child>
        </div>
    </template>
export default {
        data() {
            return {
                parentData: '',
            },
        },
        methods: {
            changeData(val) {
                // val是子组件传递过来的值
                this.parentData = val; // 事件派发修改data
            },
        },
    }

当然每次为了修改一条数据就定义一个方法有点繁琐,Vue在2.4+的版本中加了一个语法糖 .sync修饰符

下面放用法 子组件Child.vue

<template>
        <div>
            <button @click='changeParentData'><button>
        </div>
    </template>
export default {
        methods: {
            changeParentData() {
                this.$emit('update:parentData', '来自子组件的消息');
            },
        },
    }

父组件Parent.vue

<template>
        <div>
            <child :parentData.sync='parentData'></child>
        </div>
    </template>
export default {
        data() {
            return {
                parentData: '',
            },
        },
    }

父 >> 孙

使用provideinject

祖先组件Parent.vue,这里我们将父组件的vue实例对象传递出去

export default {
        provide() {
            return {
                pVue: this,
            };
        },
        data() {
            return: {
                pMsg: '祖先组件data',
            }
        }
    };

子孙组件Grandson.vue,接受祖先组件的实例对象,就可以使用Parent.vue中的方法和数据了

<template>
        <div>
            {{pVue.pMsg}}
        </div>
    </template>
export default {
        inject: ['pVue'],
    };

两两不相关的组件

通过事件总线来传递参数main.js中定义一个传递参数的中间件$bus

main.js

const bus = new Vue();
    Vue.prototype.$bus = bus;

A.vue

<template>
        <div>
            <button @click="change">改变B组件的参数</button>
        </div>
    </template>
export default {
        methods: {
            change() {
                this.$bus.$emit('changeB', '修改B组件的参数');
            }
        }
    };

B.vue

export default {
        data() {
            return {
                data: '等待被修改',
            };
        },
        created() {
            // 监听change事件修改组件内部的参数
            this.$bus.$on('changeB', msg => {
                this.data =  msg;
            })
        }
    };

当然如果有很多数据需要维护,不停的依靠组件通信也是一件不太优雅的事情,这个时候就可以依赖vuex,当我们仅仅需要简单的通信,以上的方法就可以解决大部分问题.

原文链接:segmentfault.com

上一篇:electron开发采坑小记
下一篇:列举几条常用的CSS reset,是否了解normalize.css

相关推荐

官方社区

扫码加入 JavaScript 社区