vue中组件之间相互通信传值的几种方法详解

vue中组件之间相互通信传值的几种方法详解

目录

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

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

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

3、使用provide/inject方法实现

4、使用事件总线

5、vuex\localStorage\sessionStorage

总结

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

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

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

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

1、子组件和父组件通讯,通过调用父组件给组件自定义属性值来实现 <!--parent.vue--> <template> <div> <h4>我是父组件:</h4> <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> <h4>我是子组件:</h4> <!--第一种可以使用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>

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

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

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

3.$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>

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

2.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>

事件总线的调用方式是:

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

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

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

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

5、vuex\localStorage\sessionStorage

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

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注易知道(ezd.cc)的更多内容!  

推荐阅读