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

最新推荐文章于 2023-09-13 17:27:58 发布

原创最新推荐文章于 2023-09-13 17:27:58 发布 · 1w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端 #vue #prop #传值

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>