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,将所有的数据都注入到组件中去,会提升组件复杂性、混乱性