广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

Vue组件间怎么通讯？下面本篇文章给大家分享十多种Vue3组件通讯方式，希望对大家有所帮助！

本文讲解 Vue 3.2 组件多种通讯方式的基础用法，并且使用了 单文件组件 <script setup> 。

众所周知，Vue.js 中一个很重要的知识点是组件通信，不管是业务类的开发还是组件库开发，都有各自的通讯方法。【相关推荐：vuejs视频教程】

本文适合：

有 Vue 3 基础的读者。

打算开发组件库的读者。

本文会涉及的知识点：

Props

emits

expose / ref

Non-Props

v-model

插槽 slot

provide / inject

总线 bus

getCurrentInstance

Vuex

Pinia

mitt.js

我会将上面罗列的知识点都写一个简单的 demo。本文的目的是让大家知道有这些方法可以用，所以并不会深挖每个知识点。

建议读者跟着本文敲一遍代码，然后根据本文给出的链接去深挖各个知识点。

收藏(学到)是自己的！

父组件传值给子组件（简称：父传子）

Props 文档

https://v3.cn.vuejs.org/guide/component-props.html

父组件

// Parent.vue<template>  <!-- 使用子组件 -->  <Child :msg="message" /></template><script setup>import Child from './components/Child.vue' // 引入子组件let message = '雷猴'</script>

子组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>

在 <script setup> 中必须使用 defineProps API 来声明 props，它具备完整的推断并且在 <script setup> 中是直接可用的。

更多细节请看 文档。

https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-%E5%92%8C-defineemits

在 <script setup> 中，defineProps 不需要另外引入。

props 其实还能做很多事情，比如：设置默认值 default ，类型验证 type ，要求必传 required ，自定义验证函数 validator 等等。

大家可以去官网看看，这是必须掌握的知识点！

props 文档

https://v3.cn.vuejs.org/guide/component-props.html

子组件通知父组件触发一个事件，并且可以传值给父组件。（简称：子传父）

emits 文档

https://v3.cn.vuejs.org/guide/migration/emits-option.html

父组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>

子组件

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>

和 props 一样，在 <script setup> 中必须使用 defineEmits API 来声明 emits，它具备完整的推断并且在 <script setup> 中是直接可用的。

更多细节请看 文档。

https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-%E5%92%8C-defineemits

在 <script setup> 中，defineEmits 不需要另外引入。

子组件可以通过 expose 暴露自身的方法和数据。

父组件通过 ref 获取到子组件并调用其方法或访问数据。

expose 文档

https://v3.cn.vuejs.org/api/options-data.html#expose

用例子说话

父组件

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>

子组件

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>

在 <script setup> 中，defineExpose 不需要另外引入。

expose 文档

https://v3.cn.vuejs.org/api/options-data.html#expose

defineExpose 文档

https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

所谓的 Non-Props 就是 非 Prop 的 Attribute。

意思是在子组件中，没使用 prop 或 emits 定义的 attribute，可以通过 $attrs 来访问。

常见的有 class 、style 和 id。

还是举个例子会直观点

父组件

// Parent.vue<template>  <Child msg="雷猴 世界！" name="鲨鱼辣椒" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'</script>

子组件

// Child.vue<template>  <div>子组件：打开控制台看看</div></template>

打开控制台可以看到，属性被挂到 HTML 元素上了。

但在 Vue3 中，组件已经没规定只能有一个根元素了。如果子组件是多个元素时，上面的例子就不生效了。

// Child.vue<template>  <div>子组件：打开控制台看看</div>  <div>子组件：打开控制台看看</div></template>

此时可以使用 $attrs 的方式进行绑定。

// Child.vue<template>  <div :message="$attrs.msg">只绑定指定值</div>  <div v-bind="$attrs">全绑定</div></template>

v-model 是 Vue 的一个语法糖。在 Vue3 中的玩法就更多(晕)了。

组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。

v-model 参数文档

https://v3.cn.vuejs.org/guide/component-custom-events.html#v-model-%E5%8F%82%E6%95%B0

父组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>0

子组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>1

你也可以这样写，更加简单

子组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>2

多个 v-model 绑定 文档

https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A

父组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>3

子组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>4

v-model 还能通过 . 的方式传入修饰。

v-model 修饰符 文档

https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%84%E7%90%86-v-model-%E4%BF%AE%E9%A5%B0%E7%AC%A6

父组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>5

子组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>6

插槽可以理解为传一段 HTML 片段给子组件。子组件将 <slot> 元素作为承载分发内容的出口。

插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html

本文打算讲讲日常用得比较多的3种插槽：默认插槽、具名插槽、作用域插槽。

插槽的基础用法非常简单，只需在 子组件 中使用 <slot> 标签，就会将父组件传进来的 HTML 内容渲染出来。

默认插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9

父组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>7

子组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>8

具名插槽 就是在 默认插槽 的基础上进行分类，可以理解为对号入座。

具名插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD

父组件

// Child.vue<template>  <div>    {{ msg }}  </div></template><script setup>const props = defineProps({  msg: {    type: String,    default: ''  }})console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props</script>9

子组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>0

父组件需要使用 <template> 标签，并在标签上使用 v-solt: + 名称 。

子组件需要在 <slot> 标签里用 name= 名称 对应接收。

这就是 对号入座。

最后需要注意的是，插槽内容的排版顺序，是 以子组件里的排版为准。

上面这个例子就是这样，你可以仔细观察子组件传入顺序和子组件的排版顺序。

如果你用过 Element-Plus 这类 UI框架 的 Table ，应该就能很好的理解什么叫作用域插槽。

作用域插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

父组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>1

子组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>2

我没写样式，所以用 hr 元素让视觉上看上去比较清晰我就是懒。

遇到多层传值时，使用 props 和 emit 的方式会显得比较笨拙。这时就可以用 provide 和 inject 了。

provide 是在父组件里使用的，可以往下传值。

inject 是在子(后代)组件里使用的，可以网上取值。

无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。

provide / inject 文档

https://v3.cn.vuejs.org/guide/component-provide-inject.html

父组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>3

子组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>4

provide 可以配合 readonly 一起使用，详情可以看上面例子和注释。

provide 和 inject 其实主要是用在深层关系中传值，上面的例子只有父子2层，只是为了举例说明我懒。

在 Vue2 有总线传值的方法，我们在 Vue3 中也可以自己模拟。

这个方式其实有点像 Vuex 或者 Pinia 那样，弄一个独立的工具出来专门控制数据。

但和 Vuex 或 Pinia 相比，我们自己写的这个方法并没有很好的数据跟踪之类的特性。

原理

我们创建一个 Bus.js 文件，用来控制数据和注册事件的。

Bus.js 里有一个 Bus 类

然后需要用到总线的组件，都导入 Bus.js ，就可以共同操作一份数据了。

Bus.js

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>5

父组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>6

子组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>7

这个方法其实还挺好用的，但光看可能有点懵，请大家务必亲手敲一下代码实践一下。

getcurrentinstance 是 vue 提供的一个方法，支持访问内部组件实例。

getCurrentInstance 只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用 getCurrentInstance。请不要把它当作在组合式 API 中获取 this 的替代方案来使用。

说白了，这个方法 适合在开发组件库的情况下使用，不适合日常业务开发中使用。

getCurrentInstance 只能在 setup 或生命周期钩子中调用。

getcurrentinstance 文档

https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance

在 <script setup> 中，我模拟了类似 $parent 和 $children 的方式。

父组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>8

子组件

// Parent.vue<template>  <div>父组件：{{ message }}</div>  <!-- 自定义 changeMsg 事件 -->  <Child @changeMsg="changeMessage" /></template><script setup>import { ref } from 'vue'import Child from './components/Child.vue'let message = ref('雷猴')// 更改 message 的值，data是从子组件传过来的function changeMessage(data) {  message.value = data}</script>9

可以将代码复制到你的项目中运行试试看，最好还是敲一遍咯。

Vuex 主要解决 跨组件通信 的问题。

在 Vue3 中，需要使用 Vuex v4.x 版本。

用 npm 或者 Yarn 安装到项目中。

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>0

安装成功后，在 src 目录下创建 store 目录，再在 store 下创建 index.js 文件。

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>1

在 store/index.js 下输入以上内容。

然后在 src/main.js 中引入

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>2

store/index.js

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>3

组件

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>4

我觉得 Getter 方法和 computed 是有点像的。

比如我们需要过滤一下数据，或者返回时组装一下数据，都可以用 Getter 方法。

store/index.js

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>5

组件

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>6

Mutation 是修改 State 数据的唯一方法，这样 Vuex 才可以跟踪数据流向。

在组件中通过 commit 调用即可。

store/index.js

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>7

组件

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>8

我习惯将异步的东西放在 Action 方法里写，然后在组件使用 dispatch 方法调用。

store/index.js

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>9

组件

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>0

Module 就是传说中的分包了。这需要你将不同模块的数据拆分成一个个 js 文件。

我举个例子，目录如下

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>1

index.js

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>2

user.js

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>3

goods.js

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>4

然后在各个模块里放入相应的数据和方法就行。

在组建中调用方法和访问数据，都和之前的用法差不多的。

以上就是 Vuex 的基础用法。除此之外，Vuex 还有各种语法糖，大家可以自行查阅 官方文档（https://vuex.vuejs.org/zh/）

Pinia 是最近比较火热的一个工具，也是用来处理 跨组件通信 的，极大可能成为 Vuex 5 。

Pinia 文档

https://pinia.vuejs.org/

从我使用 Pinia 一阵后的角度来看，Pinia 跟 Vuex 相比有以下优点：

除此之外，Pinia 官网还说它适用于 Vue2 和 Vue3。但我没试过在 Vue2 中使用我懒得试。

Pinia 简化了状态管理模块，只用这3个东西就能应对日常大多任务。

我举个简单的例子

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>5

在 src 目录下创建 store 目录，再在 store 里创建 index.js 和 user.js

目录结构如下

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>6

index.js

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>7

user.js

常见的写法有2种，选其中一种就行。

// Parent.vue<template>  <div>父组件：拿到子组件的message数据：{{ msg }}</div>  <button @click="callChildFn">调用子组件的方法</button>  <hr>  <Child ref="com" /></template><script setup>import { ref, onMounted } from 'vue'import Child from './components/Child.vue'const com = ref(null) // 通过 模板ref 绑定子组件const msg = ref('')onMounted(() => {  // 在加载完成后，将子组件的 message 赋值给 msg  msg.value = com.value.message})function callChildFn() {  // 调用子组件的 changeMessage 方法  com.value.changeMessage('蒜头王八')  // 重新将 子组件的message 赋值给 msg  msg.value = com.value.message}</script>8

然后在 src/main.js 中引入 store/index.js

src/main.js

// Child.vue<template>  <div>    子组件：<button @click="handleClick">子组件的按钮</button>  </div></template><script setup>// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。const emit = defineEmits(['changeMsg'])function handleClick() {  // 参数1：事件名  // 参数2：传给父组件的值  emit('changeMsg', '鲨鱼辣椒')}</script>2

组件

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>0

其实 Pinia 的用法和 Vuex 是挺像的，默认就是分包的逻辑，在这方面我支持 菠萝(Pinia)。

Pinia 还提供了多种语法糖，强烈建议阅读一下 官方文档（https://pinia.vuejs.org/）。

我们前面用到的 总线 Bus 方法，其实和 mitt.js 有点像，但 mitt.js 提供了更多的方法。

比如：

mitt.js 不是专门给 Vue 服务的，但 Vue 可以利用 mitt.js 做跨组件通信。

github 地址：https://github.com/developit/mitt

npm 地址：https://www.npmjs.com/package/mitt

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>1

我模拟一下 总线Bus 的方式。

我在同级目录创建3个文件用作模拟。

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>2

Bus.js

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>3

Parent.vue

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>4

Child.vue

// Child.vue<template>  <div>子组件：{{ message }}</div></template><script setup>import { ref } from 'vue'const message = ref('蟑螂恶霸')function changeMessage(data) {  message.value = data}使用 defineExpose 向外暴露指定的数据和方法defineExpose({  message,  changeMessage})</script>5

此时，点击 Child.vue 上的按钮，在控制台就会执行在 Parent.vue 里定义的方法。

mitt.js 的用法其实很简单，建议跟着 官方示例 敲一下代码，几分钟就上手了。

（学习视频分享：vuejs教程、web前端）

以上就是Vue3组件间怎么通讯？10+种通讯方式分享的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~