【Vue】 组件通信方式

VUE中实现通信的⽅式:

  1. props:- 若 父传子:属性值是非函数。- 若 子传父:属性值是函数
  2. emit
  3. v-model
  4. refs- $refs:父→子。$parent:子→父。
  5. provide/inject:祖孙组件直接通信,在祖先组件中通过provide配置向后代组件提供数据,在后代组件中通过inject配置来声明接收数据
  6. eventBus
  7. vuex/pinia(状态管理⼯具)
  8. mitt
    常⻅的是上⾯的这⼏种,少⻅的其实还可以算上插槽 slot, 混⼊,路由携带参数,localStorage, $parent /$children

1.props
常常使⽤在⽗组件传递給⼦组件通信的过程中,⾸先在⼦组件中使⽤ props,来接收对应的属性,⽽在⽗组件中使⽤⼦组件的地⽅,添加上⾯定义的属性。
2. emit
这个就和上⾯的相反,是使⽤在⼦组件给⽗组件传递值的中。⼦组件中声明对应的事件,当⼦组件触发事件,就会通过this.$emit(‘事件’ , ‘数据’)传递到,⽽在⽗组件中使⽤⼦组件的地⽅,添加上⾯定义的事件,这个可以获取⼦组件传来的值。
3. provide/inject
这对组合往往使⽤在层级⽐较深的时候,⽐如A组件下可能还有 B组件 ,B组件下有C组件…E组件.⽽使⽤这对API,就能⽆论层级有多深都能获取到
4. eventBus
也就是事件总线,简单粗暴,可以到处⻜。可以不管你是不是⽗⼦关系,通过新建⼀个Vue事件bus对象,然后通过 bus.emit 触发事件,bus.on 监听触发的事件。但不建议乱⽤,不好维护。
5. vuex
对于⼤型的项⽬来说往往是很必要的,尤其单⻚⾯应⽤,很多⻚⾯嵌套⻚⾯,关系很多。⽽使⽤ VUEX 就能便捷的统⼀管理。
总结
常⻅的组件通信⽅式有通过 props / emit / provide 和 inject / eventBus / vuex 等,⼀般根据不同的场景来决定使⽤的⽅式。⽐如⽗⼦组件通信使⽤ props ,反过来使⽤ emit 。⽽当层级很多的时候使⽤ provide ,全局的状态管理使⽤ vuex等。

相关推荐

  1. vue通信方式

    2024-07-22 16:48:02       57 阅读
  2. vue 之间通信方式

    2024-07-22 16:48:02       60 阅读
  3. Vue通信方式

    2024-07-22 16:48:02       42 阅读
  4. vue之间通信方式

    2024-07-22 16:48:02       42 阅读
  5. Vue 之间的通信方式

    2024-07-22 16:48:02       23 阅读
  6. vue 组件通信方法

    2024-07-22 16:48:02       30 阅读
  7. Vue通信

    2024-07-22 16:48:02       39 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-22 16:48:02       52 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-22 16:48:02       54 阅读
  3. 在Django里面运行非项目文件

    2024-07-22 16:48:02       45 阅读
  4. Python语言-面向对象

    2024-07-22 16:48:02       55 阅读

热门阅读

  1. Android 各个版本兼容型问题

    2024-07-22 16:48:02       18 阅读
  2. 透彻理解Transformer模型:详解及实用示例(C#版)

    2024-07-22 16:48:02       17 阅读
  3. 商品信息管理系统(C语言)

    2024-07-22 16:48:02       17 阅读
  4. Vue的模板编译:深入理解渲染函数与预编译模板

    2024-07-22 16:48:02       16 阅读
  5. Rust编程- 函数指针与返回闭包

    2024-07-22 16:48:02       17 阅读
  6. 0、springboot3 vue3开发平台-系统简介

    2024-07-22 16:48:02       17 阅读
  7. 将用户控件嵌入到 Excel 窗口中

    2024-07-22 16:48:02       16 阅读
  8. 数据仓库中的数据治理方法

    2024-07-22 16:48:02       17 阅读
  9. GFS分布式文件系统

    2024-07-22 16:48:02       15 阅读