一、父传子

1.父传子通用的方法就是借助props这个属性
(1)如下图我创建了一个Dom组件,并将它引入到父组件App.vue中
在这里插入图片描述
(2)下面我在父组件定义一个变量msg并赋值,然后通过在子组件上写上:msg='msg’的形式,将值传给子组件
在这里插入图片描述
(3)在子组件中通过props属性接收父组件传过来的值,获取后并将值赋值给子组件中的变量name
在这里插入图片描述
在页面中可以看到如下效果
在这里插入图片描述

二、子传父

1、方法一(通过props和回调函数形式)
(1)我在父组件创建一个方法dom通过在子组件上加入:dom='dom’的形式将其传给子组件、同时在父组件中设置一个变量用于接收dom方法中的参数
在这里插入图片描述
(2)在子组件中通过props接收父组件传过来的方法,同时在子组件中创建一个方法btndom用来触发父组件传过来的方法,并将子组件中的变量name作为参数传入
在这里插入图片描述
此时的this.name就是父组件中dom方法的参数value
2、方法2(通过自定义方法的方式)
(1)先在父组件创建一个带有参数value的dom方法,在通过往子组件添加自定义方法@parentdom='dom’的形式,将dom方法传给子组件
在这里插入图片描述
(2)在子组件先创建dombtn方法,往dombtn方法中加入this.$emit(‘parentdom’,this.name),用来触发父组件传过来的方法,this.name为子组件传给父组件的变量
在这里插入图片描述
此时的this.name就是父组件中dom方法的参数value

3、通过 e m i t 和 emit和 emiton的形式进行子传父
(1)先在父组件中通过为子组件添加ref的方式为子组件绑定方法
在这里插入图片描述
(2)在子组件先创建dombtn方法,往dombtn方法中加入this.$emit(‘parentclick’,this.name),用来触发父组件为子组件创建的方法,this.name为子组件传给父组件的变量
在这里插入图片描述
此时的this.name就是父组件中parentclick方法的回调函数参数value
在这里插入图片描述
**

三、兄弟组件互传

1、此方法是通过绑定全局总线的形式,并通过on和emit来实现的方法的创建和触发
(1)先在vue的原型在vm上添加$bus(可以随意命名)
在这里插入图片描述
(2)如果该组件需要接收另一个组件传过来的数据,则需要在该组件中添加即创建方法
在这里插入图片描述
再在另一个组件触发此方法
在这里插入图片描述
此方法也可以实现跨多个组件传送数据,子传父,父传子还是尽量用前面几种简便的方法好点
2、第二种方法有一个名字叫(消息订阅与发布)
(1)实现消息订阅与发布功能的插件有很多种,但我这里使用pubsub-js插件,在vue中通过npm i pubsub-js,并引入到对应的组件中,在这里我创建了两个组件,Bom组件是用来接收消息的,Dom、组件是用来发送消息的
(2)先在Bom组件中设置对应的数据标识msg,并创建对应的回调函数用于接收消息,回调函数有两个形参,第一个指消息标识,我这边是msg,另一个则是Dom发送过来的消息
在这里插入图片描述

(3)再在发送消息的组件Dom中通过pubsub.publish(‘msg’,this.name)的方式发送消息name
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐