美文网首页
vue组件如何通信?有几种方式?

vue组件如何通信?有几种方式?

作者: 杭州程序员小陈 | 来源:发表于2021-07-01 09:40 被阅读0次

在vue中组件通讯可以分为父子组件通讯和非父子组件通信。
父组件通过props的方式向子组件传递数据,而子组件可以通过$emit向父组件通信
兄弟组件通信: eventBus ;vuex
跨级通信: eventBus;Vuex;provide / inject 、

父组件向子组件传值(props)
prop 只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且 prop 只读,不可被修改,所有修改都会失效并警告。
子组件向父组件传值(emit)emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。

ref/refs
ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;
如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据
eventBus
eventBus 又称为事件总线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难。
vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上.

相关文章

  • Vue组件通信的几种方式【转】

    Vue组件通信的几种方式【转】 组件通信主要有以下几种方式:props,$emit和$on,vuex,$attrs...

  • vue组件如何通信?有几种方式?

    在vue中组件通讯可以分为父子组件通讯和非父子组件通信。父组件通过props的方式向子组件传递数据,而子组件可以通...

  • vue父组件调用子组件的方法

    vue组件与组件通信有如下几种情况: 平行组件父组件与子组件子组件与父组件 它们之间通信有几种方法有: props...

  • VUE组件之间多种通信方式

    给大家介绍几种VUE组件之间通信的方式,根据业务场景大家可以自行选择。 1、通过$emit让子组件与父通信 2、通...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • 2022-08-18

    vue中组件之间的通信 组件可以有以下几种关系: [图片上传失败...(image-8918e-166082302...

  • vue Bus总线

    vue中我们经常遇到组件之间的通信,通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式...

  • vue组件之间通信

    vue 组件之间通信 vue组件之间通信方式: 1.父组件通过props向下传数据给子组件,子组件通过$emit事...

  • vue组件通信的几种方式

    1.props/@on+$emit 用于实现父子组件通信. 2.$attrs、 $listenners(vue2....

  • vue组件通信的几种方式

    1、props 2、$.emit $.on 3、$attrs, $listeners 4、provide / in...

网友评论

      本文标题:vue组件如何通信?有几种方式?

      本文链接:https://www.haomeiwen.com/subject/wxhjultx.html