vue3 多层级组件传值

红烧咸咸鱼

已于 2024-02-23 15:27:20 修改

阅读量760

点赞数 7

分类专栏： vue 文章标签： vue.js 前端 javascript 多层级组件 vue传值组件传值

于 2024-02-23 15:26:48 首次发布

本文链接：https://blog.csdn.net/weixin_44180579/article/details/136256303

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了Vue中父组件通过Props逐级传递值的传统方式，以及Provide/Inject用于多层级组件参数传递的简便方法。对比了两者在使用场景、复杂度和维护成本上的差异，并提醒避免滥用provide/inject以保持组件清晰度。

摘要由CSDN通过智能技术生成

1. 传统方式：父组件通过Props将值逐级传递给要接受的子组件

// 父组件

<child :data="list"></child>

<script lang="ts" setup>
import {  reactive, toRefs} from 'vue';
const state = reactive({
    list:[]
})

const { list} = toRefs(state)
</script>


// 子组件

//通过 defineProps 来接收传递数据
defineProps({
  list{
    type: Array,
    required: true,
    default: () => []
  }
});

2. 简单方式：通过provide / inject的方式传递参数

// 父组件

import { provide } from 'vue'

//provide接收两个参数 （注入名称，传递值）
provide('key', 'test')


// 子组件

import { inject } from 'vue'

// inject接收两个个参数 （注入名称，默认值）后者可不用
const msg = inject('key'，'hello')
console.log(msg)

// 'test'

优缺点总结：

props 的方式比较常用，但不适合多层级组件的参数传递，一层一层逐级传递很麻烦，还容易出错，改动也非常麻烦（改动顶层父组件的传递值名称类型，下面的每个子组件都得更改接收值）

provide / inject 的方式，适用于多层级组件的参数传递，顶层父级只需要注入要传递的参数，下面的某个层级子节点 inject接收该注入参数就可以了，不需要逐级传递参数

注意：不要滥用provide 和 inject，将所有的数据都注入到组件中去，会提升组件复杂性、混乱性