vue prop传值default属性如何使用，为何不生效？

最新推荐文章于 2024-09-12 08:45:00 发布

龙旗飘扬的舰队

最新推荐文章于 2024-09-12 08:45:00 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： js 前端 vue prop 传值

本文链接：https://blog.youkuaiyun.com/qq_38310712/article/details/86544800

vue 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了Vue.js框架中组件Props的默认值在什么情况下会生效。当在模板中直接调用Prop属性时，即使设置了默认值，也不会使用；而当模板中未直接调用Prop属性时，所设置的默认值则会生效。这为理解Vue组件的数据传递机制提供了关键洞察。

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

如果在template中，显示的调用了 prop 属性，那么 default 属性就不会生效
如果在template中，不调用 prop 属性，default 就会生效
default 值有效与否，和 prop 的验证通不通过，没有关系

//声明
Vue.component("blog-post", {
  props: {
    postTitle: {
      type: Number,
      default: 10000
    }
  },
  template: "<h3>{{ postTitle }}</h3>"
});
//在template中，显示调用prop 属性，default不生效
<blog-post :postTitle="54"></blog-post>
//在template中，不调用prop 属性，default生效
<blog-post></blog-post>