vue3组件通讯的几种方式

目录

1.父传子

2.子传父

3.兄弟组件之间的传值

4. Pina：多组件之间的数据共享

5. provide和inject

6. ref 

---

1.父传子

（1）在父组件中给子组件绑定一个自定义属性

（2）子组件通过defineProps进行接收

 注意：如果使用defineProps接收数据，这个数据只能在模板中渲染，如果想要在script中也操作props属性，应该接收返回值。

2.子传父

（1)子组件通过defineEmit获取emits对象（因为没有this),子组件通过emits触发事件，并且传递数据

  (2)在父组件通过自定义事件的方式给子组件注册事件

3.兄弟组件之间的传值

（1）下载第三方插件 yarn add mitt

（2）新建 src/utils/eventBus.js文件，想用的时候再引入, 

import mitt from 'mitt'
const bus = mitt()
export default bus

新建 src/utils/EVENTS.js文件，用于存放方法

export default {
  SENDTOBROTHER: "SENDTOBROTHER"
}

在数据的发送方组件

在数据的接收方组件

4. Pina：多组件之间的数据共享

store的三个状态

• state: 状态

• getters: 计算属性

• actions: 修改状态（包括同步和异步，pinia中没有mutations）

新建文件 src/store/modules/user.js

import { defineStore } from 'pinia'

// 创建store,命名规则： useXxxxStore
// 参数1：store的唯一 id
// 参数2：对象，可以提供state actions getters
const useUserStore = defineStore({
  id: 'user',
  // 数据 data
  state: () => {
    return {
      count: 100,
      // 有同名属性，会以 getters 为准
    };
  },
  // 计算
  getters: {
    double() {
      // 不用再写state，通过 this 使用即可
      return this.count * 2
    },
  },
  // 在pinia中没有mutations，只有actions
  // 不管是同步还是异步的代码，都可以在actions中完成。
  actions: {
    add() {
      this.count++
    },
  },
})

// 写法2
// export const useUserStore = defineStore('user',{})
export default useUserStore

pinia模块化

    在复杂项目中，不可能把多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合.

新建  src/store/index.js

// 合并 Pinia 模块
import useUserStore from './modules/user'

// 封装 useStore 合并管理所有模块
const useStore = () => {
  return {
    user: useUserStore()
  }
}

// 默认导出
export default useStore

在组件中使用 src/views/main/index.vue

5. provide和inject

依赖注入，实现跨层级的组件通讯，例如父子，祖孙

父组件

子组件

6. ref 

     子组件通过defineExpose暴露自身的方法和数据,父组件可以通过ref获取到子组并调用方法或数据。

父组件

子组件