前端Vue专辑Vue

Vue组件通信方法总结

2021-11-15  本文已影响0人  天問_专注于大前端技术
Vue组件通信

  1. 父传子
    父组件通过自定义属性给子组件传值，子组件用props接收

  2. 子传父
    父组件在子组件标签上自定义事件，子组件通过$emit来触发自定义事件，并且可以传递参数

  3. 非父子组件传值
    eventBus事件总线：
    可通过eventBus进行信息的发布与订阅（创造一个都能访问到的事件总线）。

  4. vuex
    vuex是专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理程序的所有组件的状态，解决多组件通信。不过多用于中大型项目，小型项目用它会显得臃肿。

  5. refs
    通过添加ref和·$refs·配合，也可以很方便的获取子组件，访问调用子组件的属性和方法。

除了以上5种，还有5种不那么常见的组件通信方法：

  1. children 父组件中·children·返回的是一个组件集合，如果清楚知道子组件的顺序，也可以使用下标操作。

  2. parent 子组件中this.parent指向父组件，子组件无法直接修改父组件中的数据，可以通过this.parent让父组件自己去改，例如： this.parent.xxx=200
    this.$parent.fn()

  3. provide & inject
    成对出现：provide和inject是成对出现的
    作用：用于父组件向子孙组件传递数据
    使用方法：

provide在父组件中，返回要传给下级的数据
inject在需要使用这个数据的子孙组件中注入数据。（不论组件层次有多深）

  1. $attrs
    用于父组件给孙组件传递数据

  2. $listeners
    用于孙组件给父组件传递数据

《Vue3学习与实战》系列

上一篇下一篇

猜你喜欢

热点阅读