目前最常用是props/$emit
和 vuex/pinia
,接下来是 provide/inject
,其他不建议使用;
实际项目中,简单父子组件传递采用props/$emit
,涉及全局共享的数据一般采用 vuex/pinia
结合存储对象localStorage/sessionStorage
使用
1.props/$emit
1.props 单向数据流,父组件向子组件传递数据,不允许子组件修改props
2.支持传递静态或者动态prop,支持多种数据类型,包含数组,复杂对象
3.支持prop验证类型检查
静态prop
<blog-post title="My journey with Vue"></blog-post> //不加冒号
动态prop
<blog-post:author="{name: 'Veronica',company: 'Veridian Dynamics'}"
></blog-post>
传递对象所有property
post: {id: 1,title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post>
类型检查校验
app.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 值会通过任何类型验证)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'}}}
})
子组件通过自定义事件传递给父组件
<template><div>{{title}}<event-view @updateTitle="changeTitle"></event-view></div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import EventView from "@/views/test/EventView.vue";export default defineComponent({components: {EventView},setup() {const title = ref("我是父组件")return {title,};},methods:{changeTitle(val){this.title = val;}},
})
</script>
子组件
<template><div><a-button type="primary" @click="$emit('updateTitle','子组件修改了组件')">我是子组件</a-button></div>
</template>
<script setup lang="ts">import {defineExpose, ref} from "vue";defineEmits(['updateTitle']);
</script>
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.组件使用
<template v-for="user in users" :key="user.name"><div>{{user.name}}|{{user.age}}|{{user.status}}</div>
</template>
<script setup lang="ts">import {computed} from "vue";import { useStore } from 'vuex'const store = useStore();// 在 computed 函数中访问 state//const users = computed(() => store.state.users),const users = computed(()=> store.getters.getActiveUsers);//使用gettersconst changeMsg = function (){// 使用 mutationstore.commit('addUser',{name:"dddfas",age:33,status:true});// 使用 actionstore.dispatch('addUser',{name:"111111",age:33,status:true});}
</script>
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: () => ({ //定义共享状态usersusers :[{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.在组件/页面中使用
<template v-for="user in users" :key="user.name"><div>{{user.name}}|{{user.age}}|{{user.status}}</div>
</template>
<script setup lang="ts">import {computed} from "vue";import {useUsersStore} from "@/store/users";const usersStore = useUsersStore();const users = computed(()=>usersStore.getActiveUsers); //使用computed
</script>
Vuex与Pinia 默认存储在浏览器内存中,可以其它存储 比如
localStorage/sessionStorage
推荐使用Pinia,更加简单便捷,只提供三个概率state
,getters
和actions
,据说Pina已经实现了Vuex5 规划的大部分内容
3.provide/inject
主要适合父子组件,父和子孙组件通讯, 可以看作是长距离的 prop
,支持在setup()中使用
- 父组件不需要知道哪些子组件使用了它 provide 的 property
- 子组件不需要知道 inject 的 property 来自哪里
<template><MyMarker />
</template><script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'export default defineComponent({components: {MyMarker},setup() {provide('location', 'North Pole')provide('geolocation', {longitude: 90,latitude: 135})}
})
</script>
使用inject
<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'export default defineComponent({setup() {const userLocation = inject('location', 'The Universe') // The Universe 默认值const userGeolocation = inject('geolocation')return {userLocation,userGeolocation}}
})
</script>
当需要支持响应式注入,只需要在provide值使用ref 或着reactive
...setup() {const location = ref('North Pole')const geolocation = reactive({longitude: 90,latitude: 135})provide('location', location)provide('geolocation', geolocation)}
...
4. 内置属性 ref/$refs $children/$parent $attrs $listeners
ref
用于引用子组件,this.$refs
指向子组件$children
Vue3 已经废弃不支持了,采用$refs
方式$attrs
现在包含了所有传递给组件的 attribute,包括 class 和 style$listeners
对象在 Vue3 中已被移除。事件监听器现在是$attrs
的一部分
<template><div>{{title}}<a-button type="primary" @click="changeMsg">父组件</a-button><event-view ref="event"></event-view></div>
</template>
<script lang="ts">
import {defineComponent, ref} from 'vue';
import EventView from "@/views/test/EventView.vue";export default defineComponent({components: {EventView},setup() {const title = ref("我是父组件")return {title,};},methods:{changeMsg(){//this.$refs.event.msg = "父组件改变了子组件" // Object is of type 'unknown'.(this.$refs.event as any).msg ="父组件改变了子组件";}},
});
</script>
子组件:
<template><div>{{msg}}<a-button type="primary" @click="changeParent">子组件</a-button></div>
</template>
<script lang="ts">
import {defineComponent,ref} from "vue";export default defineComponent({setup(){let msg = ref('我是子组件');return {msg}},methods:{changeParent(){this.$parent.title = "子组件改变了父组件"}}})
</script>
$attrs
方式:
<template><label><input type="text" v-bind="$attrs" /></label>
</template>
<script>
export default {inheritAttrs: false
}
</script>
如果这个组件接收一个 id attribute 和一个 v-on:close 监听器,那么 $attrs 对象现在将如下所示:
{id: 'my-input',onClose: () => console.log('close 事件被触发')
}
应该尽量避免在<script setup> 使用this,即setup 入口函数引用this
5.localStorage/sessionStorage
-
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空
-
localStorage 解决了cookie存储空间不足的问题(每条cookie为4k),一般浏览器支持的是5M,不同浏览器中会有所区别
-
只支持字符串类型的存储,推荐getItem\setItem这两种方法对其进行存取
会话级别是标签级别的,新标签页面sessionStorage继承自之前页面的sessionStorage,但是后续两个页面的sessionStorage是单独控制的
//设置缓存
localStorage.setItem('key','value')
sessionStorage.setItem('key','value')//获取缓存
localStorage.getItem('key')
sessionStorage.getItem('key')//删除缓存
localStorage.removeItem('key')
sessionStorage.removeItem('key')//清空缓存
localStorage.clear()
sessionStorage.clear()
6.eventBus
Vue2.x 使用 EventBus 事件总线进行兄弟组件通信,而在Vue3中事件总线模式已经被移除,官方建议使用外部的、实现了事件触发器接口的库,例如 mitt 或 tiny-emitter