vue3组件通讯的几种方式

原创已于 2024-05-28 13:51:16 修改 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-05-12 17:33:58 首次发布

本文详细介绍了Vue中组件间通信的各种方式，包括父传子（通过props），子传父（通过事件），兄弟组件间通信（使用事件总线），以及更高级的数据共享机制如Pinia。还讨论了provide/inject用于跨层级组件通信，以及ref在父子组件间交互中的应用。

1.父传子

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

<template>
  <h1>我是父组件</h1>
  <!-- 前者自定义名称便于子组件调用，后者是要传递的数据变量名 -->
  <my-son :number="number"></my-son>
</template>
<script setup>
import { ref } from 'vue'
import mySon from './components/my-son.vue'
let number = ref(3)
</script>

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

<template>
  <h1>我是子组件</h1>
  <div>{{ number }}</div>
  <div>数字加2是 {{ addNumber }}</div>
</template>

<script setup>
import { computed } from 'vue'
// defineProps 不需要另外引入
const props = defineProps({
  number: {
    type: Number
  },
});
// 在 html 中直接使用父组件传过来的数据
// 要在js中使用父组件传过来的数据，需要储存在变量中，使用方式是 props.xxx 。
const addNumber = computed(() => {
  return props.number + 2
})
</script>

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

2.子传父

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

<template>
  <h1>我是子组件</h1>
  <button @click="changeNumber">点我改变父组件的number</button>
</template>

<script setup>
// defineEmits不需要另外引入
// 有多个方法，在数组中用逗号分隔
const emits = defineEmits(["changeNumber"])
function changeNumber() {
  emits("changeNumber", 100)
}
</script>

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

<template>
  <h1>我是父组件---{{ number }}</h1>
  <my-son @changeNumber="changeNumber"></my-son>
</template>
<script setup>
import { ref } from 'vue'
import mySon from './components/my-son.vue'
let number = ref(3)
const changeNumber = (val) => {
  number.value += val
}
</script>

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"
}

在数据的发送方组件

<template>
  <div>我是兄弟组件1，发送方</div>
  <button @click="sendNumber">向兄弟组件传值</button>
</template>
<script setup>
import bus from '@/utils/eventBus'
import EVENTS from '@/utils/EVENTS'
import { ref } from 'vue'
let message = ref('你好呀')
function sendNumber() {
  // 传值，自定义事件向兄弟组件传递数据
  bus.emit(EVENTS.SENDTOBROTHER, message.value)
}
</script>

在数据的接收方组件

<template>
  <div>我是兄弟组件2，接收方</div>
  <div>接收兄弟组件传过来的数据 {{ msg }}</div>
</template>
<script setup>
import bus from '@/utils/eventBus'
import EVENTS from '@/utils/EVENTS'
import { ref } from 'vue'
// 用于存储接收的数据
let msg = ref('');
// 从兄弟组件中获取数据
bus.on(EVENTS.SENDTOBROTHER, (data) => {
  msg.value = data
})
</script>

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: {
    doubleCount() {
      // 不用再写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

<template>
  <div>{{ count }}</div>
  <div>{{ doubleCount }}</div>
  <button @click='user.add'>+1</button>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
// 如果直接从pinia中解构数据，会丢失响应式， 
// 使用storeToRefs可以保证解构出来的数据也是响应式的
// toRefs 是 vue 提供，可以把所有的属性和方法都转响应式
// storeToRefs是pinia 提供，只转换属性，不转换方法
const { count, doubleCount } = storeToRefs(user)
</script>

还有另一种方法来定义，类似与vue3组合式API的setup方法，可以传入一个定义响应式属性和方法的函数，并返回一个带有属性和我们要公开的方法。

src/store/modules/user.js

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', () => {
  const count = ref(100) // state
  const doubleCount = computed(() => count.value * 2) // getters
  // actions
  function increment() {
    count.value++
  }
  return { count, doubleCount, increment }
})

src/store/index.js

import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
export * from './modules/user'

src/views/main/index.vue

<template>
  <div>{{ count }}</div>
  <div>{{ doubleCount }}</div>
  <button @click="store.increment">+1</button>
</template>
<script setup>
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const store = useUserStore()
const { count, doubleCount } = storeToRefs(store)
</script>
<style lang="less" scoped></style>

5. provide和inject

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

父组件

<template>
  <h1>我是父组件</h1>
  <my-son></my-son>
</template>
<script setup>
import { ref, provide } from 'vue'
import mySon from './components/my-son.vue'
let number = ref(3)
const changeNumber = (val) => {
  number.value += val
};
// 语法几乎和localStorage一样
// 数据和方法的传输方式一样
provide('number', number)
provide('changeNumber', changeNumber)
</script>

子组件

<template>
  <h1>我是子组件-{{ number }}</h1>
  <button @click='changeNumber(100)'>点我改变父组件的number</button>
</template>
<script setup>
import { inject } from 'vue'
const number = inject('number')
const changeNumber = inject('changeNumber')
</script>

6. ref

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

子组件

<template>
  <h1>我是子组件</h1>
</template>
<script setup>
let msg = '开心超人'
const sayHi = () => {
  console.log('你好呀！')
};
// 父组件要想使用子组件的方法，需要子组件主动暴露defineExpose
// 要先定义完，再暴露，不能写在sayHi之前
// defineExpose不需要另外导入
defineExpose({
  sayHi,
  msg
})
</script>

父组件

<template>
  <h1>我是父组件---{{ myName }}</h1>
  <my-son ref="sonRef"></my-son>
  <button @click="sayHi">sayHi</button>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import mySon from './components/my-son.vue'
// 创建空sonRef
const sonRef = ref(null)
const myName = ref("")
onMounted(() => {
  // 渲染完成后才可以读取到sonRef
  myName.value = sonRef.value.msg
})

const sayHi = () => {
  sonRef.value.sayHi()
}
</script>