Vue3组件间如何通讯
本篇内容主要讲解"Vue3组件间如何通讯"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"Vue3组件间如何通讯"吧!
本文讲解
Vue 3.2组件多种通讯方式的基础用法，并且使用了单文件组件子组件
// Child.vue{{ msg }}在
子组件
// Child.vue子组件：和
props一样，在子组件
// Child.vue子组件：{{ message }}在
子组件
// Child.vue子组件：打开控制台看看打开控制台可以看到，属性被挂到
HTML元素上了。多个元素的情况
但在
Vue3中，组件已经没规定只能有一个根元素了。如果子组件是多个元素时，上面的例子就不生效了。// Child.vue子组件：打开控制台看看子组件：打开控制台看看此时可以使用
$attrs的方式进行绑定。// Child.vue只绑定指定值全绑定v-model
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
父组件
// Parent.vue子组件
// Child.vue{{modelValue}}你也可以这样写，更加简单
子组件
// Child.vue{{modelValue}}多个 v-model 绑定
多个 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
父组件
// Parent.vue子组件
// Child.vue{{msg1}}{{msg2}}
v-model 修饰符
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
父组件
// Parent.vue子组件
// Child.vue{{modelValue}}插槽 slot
插槽可以理解为传一段
HTML片段给子组件。子组件将元素作为承载分发内容的出口。插槽 文档
https://v3.cn.vuejs.org/guide/component-slots.html
本文打算讲讲日常用得比较多的3种插槽：默认插槽、具名插槽、作用域插槽。
默认插槽
插槽的基础用法非常简单，只需在 子组件 中使用
标签，就会将父组件传进来的HTML内容渲染出来。默认插槽 文档
https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9
父组件
// Parent.vue子组件
// Child.vue具名插槽
具名插槽 就是在 默认插槽 的基础上进行分类，可以理解为对号入座。
具名插槽 文档
https://v3.cn.vuejs.org/guide/component-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD
父组件
// Parent.vue子组件
// Child.vue父组件需要使用
标签，并在标签上使用v-solt: + 名称。子组件需要在
标签里用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
子组件
// Child.vue我没写样式，所以用
hr元素让视觉上看上去比较清晰我就是懒。provide / inject
遇到多层传值时，使用
props和emit的方式会显得比较笨拙。这时就可以用provide和inject了。
provide是在父组件里使用的，可以往下传值。
inject是在子(后代)组件里使用的，可以网上取值。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。
provide / inject 文档
https://v3.cn.vuejs.org/guide/component-provide-inject.html
父组件
// Parent.vue子组件
// Child.vuemsg: {{ msg }}name: {{name}}
provide可以配合readonly一起使用，详情可以看上面例子和注释。
provide和inject其实主要是用在深层关系中传值，上面的例子只有父子2层，只是为了举例说明我懒。总线 bus
在
Vue2有总线传值的方法，我们在Vue3中也可以自己模拟。这个方式其实有点像
Vuex或者Pinia那样，弄一个独立的工具出来专门控制数据。但和
Vuex或Pinia相比，我们自己写的这个方法并没有很好的数据跟踪之类的特性。原理
我们创建一个
Bus.js文件，用来控制数据和注册事件的。
Bus.js里有一个Bus类
eventList是必须项，用来存放事件列表的。
constructor里除了eventList外，其他都是自定义数据，公共数据就是存在这里的。
$on方法用来注册事件。
$emit方法可以调用$on里的事件。
$off方法可以注销eventList里的事件。然后需要用到总线的组件，都导入
Bus.js，就可以共同操作一份数据了。Bus.js
import { ref } from 'vue'class Bus { constructor() { // 收集订阅信息,调度中心 this.eventList = {}, // 事件列表，这项是必须的 // 下面的都是自定义值 this.msg = ref('这是一条总线的信息') } // 订阅 $on(name, fn) { this.eventList[name] = this.eventList[name] || [] this.eventList[name].push(fn) } // 发布 $emit(name, data) { if (this.eventList[name]) { this.eventList[name].forEach((fn) => { fn(data) }); } } // 取消订阅 $off(name) { if (this.eventList[name]) { delete this.eventList[name] } }}export default new Bus()父组件
// Parent.vue父组件: message: {{ message }} msg: {{ msg }}子组件
// Child.vue子组件：这个方法其实还挺好用的，但光看可能有点懵，请大家务必亲手敲一下代码实践一下。
getCurrentInstance
getcurrentinstance是vue提供的一个方法，支持访问内部组件实例。
getCurrentInstance只暴露给高阶使用场景，典型的比如在库中。强烈反对在应用的代码中使用getCurrentInstance。请不要把它当作在组合式 API 中获取this的替代方案来使用。说白了，这个方法 适合在开发组件库的情况下使用，不适合日常业务开发中使用。
getCurrentInstance只能在 setup 或生命周期钩子中调用。getcurrentinstance 文档
https://v3.cn.vuejs.org/api/composition-api.html#getcurrentinstance
在
子组件
// Child.vue----------------------------子组件：
可以将代码复制到你的项目中运行试试看，最好还是敲一遍咯。
Vuex
Vuex主要解决 跨组件通信 的问题。在
Vue3中，需要使用Vuex v4.x版本。安装
用
npm或者Yarn安装到项目中。npm install vuex@next --save# 或yarn add vuex@next --save使用
安装成功后，在
src目录下创建store目录，再在store下创建index.js文件。// store/index.jsimport { createStore } from 'vuex'export default createStore({ state: { }, getters: { }, mutations: { }, actions: { }, modules: { }})在
store/index.js下输入以上内容。
state：数据仓库，用来存数据的。
getters：获取数据的，有点像computed的用法(个人觉得)。
mutations: 更改state数据的方法都要写在mutations里。
actions：异步异步异步，异步的方法都写在这里，但最后还是需要通过mutations来修改state的数据。
modules：分包。如果项目比较大，可以将业务拆散成独立模块，然后分文件管理和存放。然后在
src/main.js中引入import { createApp } from 'vue'import App from './App.vue'import store from './store'const app = createApp(App)app .use(store) .mount('#app')State
store/index.js
// store/index.jsimport { createStore } from 'vuex'export default createStore({ state: { msg: '雷猴' }})组件
// xxx.vueGetter
我觉得
Getter方法和computed是有点像的。比如我们需要过滤一下数据，或者返回时组装一下数据，都可以用
Getter方法。store/index.js
// store/index.jsimport { createStore } from 'vuex'export default createStore({ state: { msg: '雷猴' }, getters: { getMsg(state) { return state.msg + ' 世界！' } }})组件
// xxx.vueMutation
Mutation是修改State数据的唯一方法，这样Vuex才可以跟踪数据流向。在组件中通过
commit调用即可。store/index.js
// store/index.jsimport { createStore } from 'vuex'export default createStore({ state: { msg: '雷猴' }, mutations: { changeMsg(state, data) { state.msg = data } }})组件
// xxx.vueAction
我习惯将异步的东西放在
Action方法里写，然后在组件使用dispatch方法调用。store/index.js
// store/index.jsimport { createStore } from 'vuex'export default createStore({ state: { msg: '雷猴' }, mutations: { changeMsg(state, data) { state.msg = data } }, actions: { fetchMsg(context) { // 模拟ajax请求 setTimeout(() => { context.commit('changeMsg', '鲨鱼辣椒') }, 1000) } }})组件
// xxx.vueModule
Module就是传说中的分包了。这需要你将不同模块的数据拆分成一个个js文件。我举个例子，目录如下
store|- index.js|- modules/ |- user.js |- goods.js
index.js对外的出口（主文件）
modules/user.js用户相关模块
modules/goods.js商品模块index.js
import { createStore } from 'vuex'import user from './modules/user'import goods from './modules/goods'export default createStore({ state: {}, getters: {}, mutations: {}, actions: {}, modules: { user, goods }})user.js
const user = { state: { }, getters: { }, mutations: { }, actions: { }}export default usergoods.js
const goods = { state: { }, getters: { }, mutations: { }, actions: { }}export default goods然后在各个模块里放入相应的数据和方法就行。
在组建中调用方法和访问数据，都和之前的用法差不多的。
以上就是
Vuex的基础用法。除此之外，Vuex还有各种语法糖，大家可以自行查阅 官方文档（https://vuex.vuejs.org/zh/）Pinia
Pinia是最近比较火热的一个工具，也是用来处理 跨组件通信 的，极大可能成为Vuex 5。Pinia 文档
https://pinia.vuejs.org/
从我使用
Pinia一阵后的角度来看，Pinia跟Vuex相比有以下优点：
调用时代码跟简洁了。
对
TS更友好。合并了
Vuex的Mutation和Action。天然的支持异步了。天然分包。
除此之外，
Pinia官网还说它适用于Vue2和Vue3。但我没试过在Vue2中使用我懒得试。
Pinia简化了状态管理模块，只用这3个东西就能应对日常大多任务。
state：存储数据的仓库
getters：获取和过滤数据（跟computed有点像）
actions：存放 "修改state"的方法我举个简单的例子
安装
npm install pinia# 或yarn add pinia注册
在
src目录下创建store目录，再在store里创建index.js和user.js目录结构如下
store|- index.js|- user.jsindex.js
import { createPinia } from 'pinia'const store = createPinia()export default storeuser.js
常见的写法有2种，选其中一种就行。
import { defineStore } from 'pinia'// 写法1export const useUserStore = defineStore({ id: 'user', // id必填，且需要唯一 state: () => { return { name: '雷猴' } }, getters: { fullName: (state) => { return '我叫 ' + state.name } }, actions: { updateName(name) { this.name = name } }})// 写法2export const useUserStore = defineStore('user',{ state: () => { return { name: '雷猴' } }, getters: { fullName: (state) => { return '我叫 ' + state.name } }, actions: { updateName(name) { this.name = name } }})然后在
src/main.js中引入store/index.jssrc/main.js
import { createApp } from 'vue'import App from './App.vue'import store from './store'const app = createApp(App)app .use(store) .mount('#app')在组件中使用
组件
// xxx.vuename: {{ name }}全名：{{ fullName }}啰嗦两句
其实
Pinia的用法和Vuex是挺像的，默认就是分包的逻辑，在这方面我支持 菠萝(Pinia)。
Pinia还提供了多种语法糖，强烈建议阅读一下 官方文档（https://pinia.vuejs.org/）。mitt.js
我们前面用到的 总线 Bus 方法，其实和
mitt.js有点像，但mitt.js提供了更多的方法。比如：
on：添加事件
emit：执行事件
off：移除事件
clear：清除所有事件
mitt.js不是专门给Vue服务的，但Vue可以利用mitt.js做跨组件通信。安装
npm i mitt使用
我模拟一下 总线Bus 的方式。
我在同级目录创建3个文件用作模拟。
Parent.vueChild.vueBus.jsBus.js
// Bus.jsimport mitt from 'mitt'export default mitt()Parent.vue
// Parent.vueMittChild.vue
// Child.vueChild：此时，点击
Child.vue上的按钮，在控制台就会执行在Parent.vue里定义的方法。
mitt.js的用法其实很简单，建议跟着 官方示例 敲一下代码，几分钟就上手了。到此，相信大家对"Vue3组件间如何通讯"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
