Vue3组件通讯六种方式

简介: Vue3组件通讯六种方式

目前最常用是props/$emit 和 vuex/pinia ,接下来是 provide/inject,其他不建议使用;
实际项目中,简单父子组件传递采用props/$emit ,涉及全局共享的数据一般采用 vuex/pinia 结合存储对象localStorage/sessionStorage使用

1.props/$emit
1.props 单向数据流,父组件向子组件传递数据,不允许子组件修改props
2.支持传递静态或者动态prop,支持多种数据类型,包含数组,复杂对象
3.支持prop验证类型检查

静态prop

//不加冒号
动态prop

<blog-post
:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"


传递对象所有property

post: {
id: 1,
title: 'My Journey with Vue'
}


类型检查校验

app.component('my-component', {
props: {
// 基础的类型检查 (nullundefined 值会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组的默认值必须从一个工厂函数返回
default() {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator(value) {
// 这个值必须与下列字符串中的其中一个相匹配
return ['success', 'warning', 'danger'].includes(value)
}
},
// 具有默认值的函数
propG: {
type: Function,
// 与对象或数组的默认值不同,这不是一个工厂函数——这是一个用作默认值的函数
default() {
return 'Default function'
}
}
}
})
子组件通过自定义事件传递给父组件



{ {title}}




子组件


我是子组件



2.Vuex/Pinia
vuex 是针对vue的一个状态管理插件,vue3 匹配vuex4,vue2匹配vuex 3的版本,包含六个核心概念:state getter mutations actions modules

actions 可以包含任意异步操作, mutations 是同步操作,modules为了分割大状态
主要针对多个组件共享状态时:
多个视图组件依赖统一状态
来自不同的视图的行为需要变更同一状态
1.定义state数据

import { createStore } from 'vuex'
interface User{
name:string,
age:number,
status:boolean
}
const usersModule = {
state: () => ({
users :[{
name: 'test111',
age: 231,
status: true,
}],
}),
getters: {
getActiveUsers:(state) => {
return state.users.filter(user => user.status);
},
},
mutations: {
addUser(state,user:User){
state.users.push(user);
}
},
actions: {
addUser(context,user:User){
context.commit('addUser',user)
}
},

}
export const vueStore = createStore({
modules: {
users: usersModule,
}
})

绑定实例全局
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App);
app.use(vueStore)
···
3.组件使用


{ {user.name}}|{ {user.age}}|{ {user.status}}



Pinia 是 Vue 的存储库,也是为了实现跨组件/页面共享状态,但是Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持;

1.创建Pinia实例

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')
定义状态数据
import { defineStore } from 'pinia'

interface User{
name:string,
age:number,
status:boolean
}

export const useUsersStore = defineStore({
id: 'todo',
state: () => ({ //定义共享状态users
users :[{
name: 'test1',
age: 23,
status: true,
}]
}),
getters: { //主要用于读取数据,默认是响应式的
getActiveUsers(state){
return state.users.filter(user => user.status)
}
},
actions: { //主要用于更新数据
addUser(user:User){
this.users.push(user);
}
},

})
3.在组件/页面中使用


{ {user.name}}|{ {user.age}}|{ {user.status}}



Vuex与Pinia 默认存储在浏览器内存中,可以其它存储 比如localStorage/sessionStorage
推荐使用Pinia,更加简单便捷,只提供三个概率state,getters和 actions,据说Pina已经实现了Vuex5 规划的大部分内容

3.provide/inject
主要适合父子组件,父和子孙组件通讯, 可以看作是长距离的 prop,支持在setup()中使用

父组件不需要知道哪些子组件使用了它 provide 的 property
子组件不需要知道 inject 的 property 来自哪里



使用inject


当需要支持响应式注入,只需要在provide值使用ref 或着reactive

...
setup() {
const location = ref('North Pole')
const geolocation = reactive({
longitude: 90,
latitude: 135
})

provide('location', location)
provide('geolocation', geolocation)

}
...

  1. 内置属性 ref/$refs $children/$parent $attrs $listeners
    ref 用于引用子组件,this.$refs 指向子组件
    $children Vue3 已经废弃不支持了,采用$refs 方式
    $attrs 现在包含了所有传递给组件的 attribute,包括 class 和 style
    $listeners 对象在 Vue3 中已被移除。事件监听器现在是 $attrs 的一部分


    { {title}}
    父组件




    子组件:


    { {msg}}子组件


    $attrs 方式:






    如果这个组件接收一个 id attribute 和一个 v-on:close 监听器,那么 $attrs 对象现在将如下所示:

    {
    id: 'my-input',
    onClose: () => console.log('close 事件被触发')
    }
    应该尽量避免在

目录
相关文章
|
3月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
420 0
|
3月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
30天前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
131 0
|
1月前
|
缓存 JavaScript UED
除了循环引用,Vue3还有哪些常见的性能优化技巧?
除了循环引用,Vue3还有哪些常见的性能优化技巧?
103 0
|
2月前
|
JavaScript
vue3循环引用自已实现
当渲染大量数据列表时,使用虚拟列表只渲染可视区域的内容,显著减少 DOM 节点数量。
72 0
|
3月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
158 1
|
3月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入,动态渲染进度段,支持动画效果和内容展示。当进度超出总长时,超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤(包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示),并提供了使用示例。通过此组件,开发者可根据项目需求灵活展示进度情况,优化用户体验。资源地址:[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
101 0
|
JavaScript
Vue的非父子组件之间传值
全局事件总线 一种组件间通信的方式,适用于任意组件间通信
179 0
|
缓存 JavaScript 前端开发
Vue Props、Slot、v-once、非父子组件间的传值....
Vue Props、Slot、v-once、非父子组件间的传值....
150 0
|
JavaScript
Vue中父子组件传值
先在⽗组件中给⼦组件的⾃定义属性绑定⼀个⽗组件的变量
144 0