前端面试——父子组件传值
记录集中父子组建传值的方法
一.自定义事件进行父子组件直接传值
直接看往期文章：超详细vue3组合式父子组件传值_vue3父子组件传值-CSDN博客
二.vue3自带API——proviede/inject
我们在子组件迭代层数很深，但是又需要很远的父组件的数值，我们就需要使用proviede/inject来防止出现props透传
我的顶级父组件：AboutView,vue
这里面注入了一个函数和一个方法到provide当中
<template><div>这是测试页面<MsgItem :msg="values"></MsgItem></div>
</template><script lang="ts" setup>
import { provide, ref } from 'vue'
import MsgItem from './MsgItem.vue'const values = ref('666')
const myFun = (nums: number) => {console.log('myFun', nums * 10)
}provide('myFun', myFun)
provide('values', values)
</script><style lang="scss" scoped></style>
我的第二级组件：MsgItem.vue
<template><div>这是MsgItem<MsgItemItem></MsgItemItem></div>
</template><script lang="ts" setup>
import MsgItemItem from './MsgItemItem.vue'
</script><style lang="scss" scoped></style>
我的第三级组件：MsgItemItem.vue
<template><div>是MsgItemItem</div>
</template><script lang="ts" setup>
import { inject, onMounted } from 'vue'const values = inject('values')
const myFun = inject('myFun')
onMounted(() => {console.log(values, myFun(100))
})
</script><style lang="scss" scoped></style>
PS:如果不是父子组件关系，那么就会显示undefined
三.Vuex
我们首先下载Vuex,作者本人原本的项目使用node V16.14.2下载不下来Vuex4.x.x,索性后面切换Node V18.18.1 然后pnpm下载的Vuex 4.1.0
首先新建一个文件存储全局变量：
// /src/vuex.js
import { createStore } from 'vuex'const store = createStore({state: {count: 0},mutations: {increment(state) {console.log('访问mutations ++')state.count++}},actions: {async increment({ commit }) {console.log('访问commit')for (let i = 0; i < 10; i++) {await commit('increment')}},test({ state }) {console.log('访问test commit')state.count--},test2({ commit }) {console.log('访问test2 commit')commit.count++}},getters: {count(state) {console.log('访问getter')return state.count}}
})
export default store
这里面有四个部分
state:声明全局状态，直接定义初始数据即可
mutations：执行对state里面定义的状态的更改操作，只允许使用state作为参数
actions：执行处理逻辑，支持异步操作。可以使用state,commit,dispatch.getters作为参数
gettters: 可以缓存函数的结果，使得代码简洁。支持state和getters作为参数
| 序号 | 操作 | 对应调用 |
| 1 | store.state.xxx | state |
| 2 | store.commit("xxx") | mutations |
| 3 | store.dispatch("xxxx") | actions |
| 4 | store.getters("xxxx") | getters |
然后挂载到Vue实例，这样就可以使用useStore()
// /src/main.ts
import './assets/main.css'import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'import store from './vuex' // 引入 storeconst app = createApp(App)app.use(createPinia())
app.use(router)
app.use(store) // 挂载到实例，就可以使用 useStore
app.mount('#app')