vue中组件间相互通信传值的方法有哪些

这篇文章主要讲解了“Vue中组件间相互通信传值的方法有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue中组件间相互通信传值的方法有哪些”吧！

vue中组件之间相互通讯传值的方式

我们在使用vue进行项目开发的时候为了更好地管理项目，我们会把每个功能封装成一个个的组件，在使用的时候直接引入并且调用组件来实现代码的复用。

我们在封装组件的时候经常会留有一些预留的接口，供使用的时候调用和传入不同的数据，这个时候我们就涉及到了组件之前的相互传值的问题。

我这里总结了在vue中组件之前相互传值的方法：

1、子组件和父组件通讯，通过调用父组件给组件自定义属性值来实现

<!--parent.vue--><template>    <div>        <h5>我是父组件：</h5>        <p>这是我自己的数据{{num}}</p>        <!--通过给子组件传入自定义属性值，传数据用v-bind或者简写形式:号， 传方法可以使用v-on或者简写@符绑定事件-->        <child :p-num="num" :p-num2="num2" @changePNum="changeNum" />    </div></template><script>    import child from './child.vue'    export default{        name: 'parent',        data(){            return{                num: 10,                num2: 20            }        },        methods:{            changeNum(n){                this.num = n;            }        }    }</script><!--child.vue--><template>    <div>        <h5>我是子组件：</h5>        <!--第一种可以使用props对象来接收父级传过来的属性-->        <p>这是通过props接收父级组件传过来的数据{{ pNum}}</p>        <!--第二种是通过元素的实例属性$attrs获取，没有呗props接收的剩余属性-->        <p>这是通过组件中的$attrs对象获取父级组件传过来的数据{{ $attrs['p-num2']}}</p>        <!--第三种是通过当前实例中的$parent属性拿到父级实例对象-->        <p>这是通过组件中的$attrs对象获取父级组件传过来的数据{{ topNum }}</p>        <button @click="changeNum">通过$emit改变父级的数据</button>        <button @click="changeNum2">通过$listeners改变父级的数据</button>        <button @click="changeNum3">通过$parent改变父级的数据</button>    </div></template><script>    export default{        name: 'child',        // 第一种可以使用props对象来接收父级传过来的属性        props:{            // 这里写对应的要接收的属性名以驼峰的形式接收            pNum: {                type: Number            }          },        data(){            return {                topNum: 0            }        },        created(){            // 通过使用实例中的$parent拿到父级组件的实例，然后获取值            this.topNum = this.$parent.num;          },        methods:{            changeNum(){                // 这里是通过当前组件中的$emit方法来调用父级传过来的方法，并且可以传入参数                this.$emit('changePNum', 40);            },            changeNum2(){                // 通过组件中的$listeners中的存储的父级传过来的方法进行调用                this.$listeners.changePNum(50);            },            changeNum3(){                // 通过组件中的$listeners中的存储的父级传过来的方法进行调用                this.$parent.changeNum(60);            }        }    }</script>

上边的代码展示了两种不同形式的组件之间的通讯方式，父组件传值方式相同，子组件获取操作方式不同

props/$emit组合方式：子组件通过定义props值拿到父组件传给子组件的属性来获取；子组件通过使用$emit方法调用父组件的方法；

$attrs/$listeners组合方式：子组件可以通过$attrs属性中的值拿到父组件传给子组件的属性值，它里边存储的是props之外的属性值；

$parent方法获取父组件中的数据和方法

2、父组件主动获取子组件数据

<!--parent--><template>    <div>        <button @click="changeChildANum">通过$refs调用子组件方法更改子组件数据</button>        <button @click="changeChildBNum">通过$children调用子组件方法更改子组件数据</button>        <p>这是获取的子组件childA的数据：{{childA_num}}</p>        <p>这是获取的子组件childB的数据：{{childB_num}}</p>        <!--这里通过使用ref把组件示例注册到当前组件的$refs中-->        <child-a ref="childA"/>        <child-b />    </div></template><script>    import childA from './childA.vue';    import childB from './childA.vue';    export default{        components:{            childA,            childB        },        data(){            return {                childA_num: 0,                childB_num: 0            }        },        created(){},        mounted(){            // $refs 和 $children 都是需要在mounted中才能获取到            // 这里通过$refs获取注册在里边的子组件实例，并且获取他的数据            this.childA_num = this.$refs.childA.num            // 第二种方式通过当前组件示例中的$children获取子组件实例            this.childB_num = this.$children[1].num;        },        methods:{            changeChildANum(){                // 这里通过使用$refs中的组件实例调用组件中的方法                this.$refs.childA.changeNum();            },            changeChildBNum(){                // 这里通过使用$refs中的组件实例调用组件中的方法                this.$children[1].changeNum();            }        }    }</script><!--child--><template>    <div></div></template><script>    export default{        name: 'childA',        data(){            return{                num: 10            }        },        methods:{            changeNum(){                this.num++;            }        }    }</script>

ref/$refs方式，通过给引入的组件定义一个ref属性，然后就可以通过$refs结合该属性值得到当前组件的实例

ref/$children属性，给组件定义ref值后，当前组件实例中会在this.$children中拿到所有定义了ref的组件数组，我们在通过下标进行获取某个子组件的方法后者属性值。

3、使用provide/inject方法实现

<!--parent.vue--><template>    <div>        <child />    </div></template><script>    import child from './child.vue';    export default{        // 通过给父级定义一个provide对象，并且定义成一个函数形式，然后返回一个parentData对象，并且对象指向当前组件的一个数据对象上，这样相当于都指向一个对象        provide(){            return {                parentData: this.proVideData            }        }        name: 'Parent',        components:{            child        },        data(){            return{                proVideData: {                    num, 1,                    changeNum: null                }            }        },        created(){            // 然后通过实例化后把需要被子组件调用到的方法传入进去            this.proVideData.changeNum = this.changeNum;        },        methods:{            changeNum(){                this.proVideData.num++;            }        }    }</script><!--child.vue--><template>    <div>        <p>{{parentData.num}}</p>        <button @click="parFun">调用父级的方法</button>    </div></template><script>    export default{        // 子组件通过inject接到祖先组件中的provide广播的数据        inject:['parentData'],        name: 'child',        data(){            return{            }        },        methods:{           parFun(){                // 这里直接执行存储下来的方法               this.parentData.changeNun();           }         }    }</script>

这种方式适合层级比较深的组件传值，这里的基本原理是，通过给祖先组件配置provide属性，然后把想要传给后代组件的属性值，进行存储；
然后在后代组件中，那个需要拿到传播的数据，可以给组件本身配置injuct属性，来接收想要监听的数据值；

然后就可以进行通信了

4、使用事件总线

此方发可以在任意组件中进行监听当前定义的方法。来实现，组件间相互通信

<!--event-bus.js-->import Vue from 'vue';// 这里从创建了一个新的vue实例对象export const EventBus = new Vue();<!--parent.vue--><template>    <div>    </div></template><script>// 这里引入事件总线import { EventBus } from './event-bus';export default{    data(){        return{            eventBusMsg: ''        }    },    created(){        // 然后给事件总线绑定一个需要监听的方法，类似于发布订阅者的增加订阅        EventBus.$on("eventBusMsg", (msg) => {            console.log(msg);            this.eventBusMsg = msg;        });    },    beforeDestroy(){         EventBus.$small("eventBusMsg");    }}</script><!--sub.vue后代组件--><template>    <div>        <button @click="eventBusChange">通过事件总线调用组件的方法</button>    </div></template><script>// 其他组件也需要你引入该插件import { EventBus } from './event-bus';export default{    data(){    },    created(){    },    methods:{        eventBusChange(){            //这里是通过eventBus来调用一个订阅的消息方法，并传入值过去            EventBus.$emit('eventBusMsg', 'childB');        }    }}</script>

事件总线的调用方式是:

定义一个全局的vue示例并导出;

然后在需要监听某个事件的组件中引入event-bus

给当前的组件在created方法中增加方法

然后子组件可以通过引入event-bus文件然后通过EventBus.$emit方式执行监听的时间方法

5、vuex\localStorage\sessionStorage

还可以使用Vuex、本地存储等方式来实现全局公用。

感谢各位的阅读，以上就是“vue中组件间相互通信传值的方法有哪些”的内容了，经过本文的学习后，相信大家对vue中组件间相互通信传值的方法有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！