vue props传值,子组件接受到undefined

本文介绍了Vue.js中Props的使用方式及注意事项,强调了Props用于父组件向子组件传递数据的单向绑定机制,并提到了HTML模板中大小写敏感的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。不应该在一个子组件内部改变 prop,Vue 会在浏览器的控制台中发出警告。

props传参,子组件接受到undefined的可能情况之一是因为大小写问题,因为 HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

如果你使用字符串模板,那么这个限制就不存在了。

原文地址:https://cn.vuejs.org/v2/guide/components-props.html

### Vue3 中父组件递给子组件被置空问题及其解决方案 在 Vue3 开发过程中,当遇到父组件通过 `props` 向子组件递数据时,如果这些数据来自异步操作(如 API 请求),可能会出现子组件接收到的是初始状态下的默认或者是未定义的情况。这通常是因为异步请求的结果还未返回之前,子组件已经完成了初始化。 为了有效解决这个问题,在子组件内部可以采用多种策略来确保能够正确接收到来自父级的新数据: #### 使用计算属性判断数据有效性 一种方法是在子组件中利用计算属性来检测父组件递下来的 prop 是否存在以及是否有实际内容。只有当该条件满足时才渲染相应的 UI 或者执行特定逻辑[^3]。 ```html <template> <div v-if="displayData">{{ displayData }}</div> </template> <script setup> import { computed } from 'vue'; const props = defineProps(['data']); const displayData = computed(() => { if (props.data !== undefined && props.data !== null) { return props.data; } return ''; }); </script> ``` 这种方法的好处是可以避免不必要的 DOM 更新,并且可以在等待真实数据到达期间提供更好的用户体验设计选项。 #### Watcher 监控 Prop 变化 另一种常见的做法是设置 watcher 来监视父组件递过来的数据的变化情况。一旦发现新的,则立即做出响应,比如更新本地的状态变量或者其他必要的处理动作[^4]。 ```javascript // 子组件脚本部分 import { ref, watch } from 'vue'; export default { props: ['curentProcess'], setup(props){ let plan = reactive({ curentAll: '', curentProcess: '' }); // 初始化更新进度 updateCurrentProcess(props.curentProcess); // 监听父组件子组件数据变化 watch(() => props.curentProcess, (newVal, oldVal) => { console.log(`新旧分别为 ${JSON.stringify(oldVal)} 和 ${JSON.stringify(newVal)}`); updateCurrentProcess(newVal); }); function updateCurrentProcess(newVal) { Object.assign(plan, newVal); } return{ ...toRefs(plan), }; }, }; ``` 此方式特别适用于那些依赖于动态改变其行为或外观的场景下,它允许开发者更加灵活地控制何时何地应用最新版本的信息。 综上所述,针对 Vue3 父组件向子组件输异步加载的数据可能出现的问题,可以通过上述两种技术手段之一来进行优化改进,从而实现更稳定可靠的应用程序性能表现。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值