前端面试——父子组件传值

记录集中父子组建传值的方法

一.自定义事件进行父子组件直接传值

直接看往期文章：超详细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作为参数

在Vue中对Vuex进行的对应操作的代码（store为useStore()实例）：

序号	操作	对应调用
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' // 引入 store

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(store) // 挂载到实例，就可以使用 useStore
app.mount('#app')