首页 > 试题广场 >

说一说组件通信的方式?

[问答题]
说一说组件通信的方式?
1、父子组件通信常用props和$emit还有$refs;2、兄弟组件通信常用定义的公共事件bus的$on、$emit;3、祖先和子孙组件通信常用$attrs和$listener、provide和inject;4、复杂通信常用vuex
发表于 2022-05-26 16:48:38 回复(2)
父传子在子组件中定义props,子传父使用$emit()自定义事件,还有事件总线bus
发表于 2022-04-26 13:15:00 回复(0)
Vue的组件通信一般分为三大类。1:父子组件通信,最常见的使用props和emit,父组件通过props将数据传递给子组件,子组件通过emit触发父组件中的方法来修改数据。其次还可以通过$ref、$parent和$child进行通信。2:祖孙组件之间的通信:这种通信一般也可以用props和emit只不过逐层传递会很麻烦,可以可以使用$listener和$attrs来进行通信。3:兄弟组件之间的通信:可以创建eventBus事件总线,通过$emit和$on的方式进行通信。其次还有全局数据通信,我们可以使用Vuex作为全局状态管理来实现。
发表于 2022-08-04 16:48:59 回复(0)
1.父与子通信:父组件通过props传递给子组件 + 子组件通过自定义事件this.$emit传递给父组件 2.eventBus:适用于所有组件间通信,所有组件共用一条事件总线,接收数据方eventBus.$on注册自定义事件的回调函数,发送数据方eventBus.$emit触发自定义事件发送消息。 3.vuex:适用于所有组件间通信,全局状态管理。state用于存储共享变量,mutations用于响应式更新共享变量,actions用于异步响应式更新共享变量。
编辑于 2022-08-18 15:31:38 回复(0)
父子:props,emit,refs
兄弟:eventbus,emit
隔代:inject,provide,attr,listener
不传火了:vuex,pinia
发表于 2022-06-26 23:00:24 回复(1)
讲的不够全哦
发表于 2023-03-07 19:49:08 回复(0)
1.父子:props,emit,refs 2.兄弟:eventbus,emit 3.隔代:inject,provide,attr,listener 4.复杂关系:vuex,pinia
发表于 2022-08-01 09:04:15 回复(0)
1、父组件向子组件传值用props,子组件向父组件传值用$emit 2、还可以通过$refs拿到子组件中的属性和方法;3、父组件通过provide向子组件传值,子组件通过inject取值 4、通过状态管理vuex
编辑于 2024-03-22 10:44:03 回复(0)
父子:props,$emit,$ref 兄弟:eventbus 复杂:vuex
编辑于 2024-03-03 17:21:13 回复(0)
父子组件通信: props $emit $refs 兄弟组件通信:通过父组件通信 、bus的$on、$emit 祖先和子孙组件: $attrs和$listener、provide和inject 还可以采用vuex 全局管理数据
编辑于 2024-02-22 12:36:49 回复(0)
父传子:将父组件要传递给子组件的值以一个自定义属性的形式绑定在子组件标签上,在子组件中以props接收参数 子传父:在父组件中定义一个自定义事件,在子组件中通过$emit触发事件传递参数,this.$emit('方法名',参数) entBus: 使用方法是创建一个新的Vue实例,需要通信的组件都引入该Vue实例,传递数据的组件使用` event.$emit('名称',参数)`发送数据,接收数据的组件使用 `event.$on('名称',方法)`接收数据 Vuex实现任意组件间传值
发表于 2023-10-24 10:07:11 回复(0)
1.父子通信:父组件通过Props传递给子组件,子组件通过$emit传递给父组件 2.Vuex 3.$refs,父组件通过访问该组件的实例 4.$parent 和 $children 5.eventbus
发表于 2023-10-10 19:36:29 回复(0)
1.父与子通信:父组件通过props传递给子组件,子组件通过自定义事件this.$emit传递给父组件,还有$refs 2.eventBus:适用于所有组件间通信,所有组件公用一条事件总线; 接收数据方eventBus.$on注册自定义事件的回调函数,发送方eventBus.$emit触发自定义事件发送消息。 3.祖孙通信:①在祖组件中,使用provide提供数据或方法给后代组件。在孙组件中,使用inject接收祖组件提供的数据或方法。 ②在祖组件中,使用v-on="$listeners"绑定监听器,实现孙 -> 祖通信。在孙组件中,访问$attrs对象获取祖组件 传递的属性的值 4.Vuex:适用于所有组件间通信,全局状态管理。state用于存储共享变量,mutations用于响应式更新共享变量,actions用于异步响应式更新共享变量。
发表于 2023-09-05 20:02:44 回复(0)
父子通信 自定义属性,props.emit,eventbus,on,vuex
发表于 2023-06-06 14:04:18 回复(0)
组件通信可分为两类: 一、父子组件通信 Vue里面:父传子用props,这里props只读,不能相互props传。子传父用this.$emit(),无论是变量还是方法,都要通过上面的emit触发。 React里面:父传子也是通过props,非只读,可以改变。子传父也是通过props,父组件把触发方法放到props,子组件触发父组件方法来达到传父。Vue和React子传父都是通过触发方法来传递,不同在于Vue用的Vue实例上的this.$emit(),React用的父组件定义的方法。 二、任意关系型通信 Vue里面:通过EventBus和Vuex等。 React里面:通过发布订阅模式或者Redux等,发布订阅类似EventBus,只不过React没封装,需要自己创建
发表于 2023-04-19 18:50:19 回复(1)
父子通信,在子组件用props接收; 兄弟之间传参Eventbus,$emit传参,$on接收参数,$off取消监听; 传递html结构用插槽slot ; vuex解决组件间通信
发表于 2023-03-22 10:50:39 回复(0)
父传子: props,子传父: emit, 全局事件总线 eventBus, 状态管理: pinia, vuex, 祖传孙: provide, inject。父组件直接调用子组件暴露出的变量和方法: ref
发表于 2023-03-10 10:48:23 回复(0)
(1)props 父子组件通信 (2)$bus 全局总线通信 (3)vuex通信 (4)$emit 子父自定义事件通信
发表于 2023-03-04 10:57:15 回复(0)
vue组件的通信方式分为两大类:1、父子组件通信;2、其他关系组件通信(父子,兄弟,非兄弟);父子通信通常是父传给子是通过子组件添加自定义属性,子接受父组件是通过props,子传给父是this.$emit(方法名,参数)。props不能修改,修改之后会警告。其他关系组件通信是eventBus,使用方法是创建一个vue实例,需要通信的组件引用这个vue实例,传递数据的组件是通过event.$emit(方法名,参数),接受数据通过event.on(名称,方法);vuex集中式管理公共数据,使用commit mutations修改store的数据之后,所有相关的组件的都会一起发生变化。由于vue是单页面应用,因此当页面刷新之后,所有的eventBus都会被移除,并且当重复修改会导致eventBus在监听的时候会触发好多次,在vue页面销毁的时候同时移除eventBus时间监听。优点:可以解决多层复杂的组件之间的事件传播,使用原理简单,代码少,适合简单,组件传递数据较少的项目,如果是大型项目业务复杂的尽量还是使用vuex。
发表于 2023-02-21 15:31:19 回复(0)
1.答 Vue组件的通信方式分为两大类,一类是父子组件通信,另一类是任何关系类型组件通信(父子、兄弟、非兄弟)
2.父传子在子组件中定义props,子传父使用$emit()、$refs
3.兄弟组件通信常用定义的公共事件bus的$on (eventbus)、$emit;
4.祖先和子孙组件通信常用$attrs和$listener、provide和inject;
5.复杂通信常用vuex/pinia
编辑于 2023-02-06 11:24:39 回复(0)