vue页面父组件调用子组件 动态传参和固定传参的区别

Vue 中父组件调用子组件时动态传参与固定传参的区别
固定传参
当使用固定传参方式时，父组件中的属性值是在定义阶段就已确定，并不会随着父组件的状态变化而改变。这种方式适用于那些不需要频繁更新或依赖于特定状态的场景。
例如，在 parent.vue 文件中：
<template>
<child-component :id="fixedId"></child-component>
</template>

<script setup>
const fixedId = 'staticValue'; // 这是一个固定的字符串值
</script>
登录后复制
这里 fixedId 的值在整个应用生命周期内保持不变[^1]。
动态传参
相比之下，动态传参会依据父组件内部逻辑的变化实时调整传递给子组件的数据。这通常涉及到响应式的 JavaScript 变量或其他可以随时间推移发生更改的内容。对于需要根据上下文灵活变动的情况非常有用。
同样的例子可以在 parent.vue 实现如下形式：
<template>
<button @click="changeDynamicId">Change ID</button>
<child-component :id="dynamicId"></child-component> <!-- 使用 v-bind 绑定 -->
</template>

<script setup>
import { ref } from 'vue';
let dynamicId = ref('initialValue');

function changeDynamicId() {
dynamicId.value = Math.random().toString(36).substr(2, 9); // 更新为随机数
}
</script>
登录后复制
在这个案例里，每当点击按钮触发 changeDynamicId() 函数执行的时候，dynamicId 就会被赋予新的随机数值并同步到子组件中[^2]。
为了使上述两种情况都能正常工作，还需要确保子组件能够正确接收到这些参数。可以通过 defineProps 来声明预期接收来自父级的 props 属性名称以及类型验证等操作[^3]。