解决vue prop传值default属性如何使用,为何不生效的问题
更新时间：2020年09月21日 09:49:15 作者：龙旗飘扬的舰队
这篇文章主要介绍了解决vue prop传值default属性如何使用,为何不生效的问题。具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
如果在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>
补充知识：vue prop不同数据类型(数组，对象..)设置默认值
vue prop 会接收不同的数据类型，这里列出了 常用的数据类型的设置默认值的写法,其中包含： Number, String, Boolean, Array, Function, Object
refAge: {
type: Number,
default: 0
},
refName: {
type: String,
default: ''
},
hotDataLoading: {
type: Boolean,
default: false
},
hotData: {
type: Array,
default: () => {
return []
}
},
getParams: {
type: Function,
default: () => () => {}
},
meta: {
type: Object,
default: () => ({})
}
以上这篇解决vue prop传值default属性如何使用,为何不生效的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
keep-Alive搭配vue-router实现缓存页面效果的示例代码
这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
在基于Vue.js构建的应用程序中,处理日期选择器是一个常见的需求,尤其是在涉及到日期范围的选择时,Vue提供了多种方式来实现日期选择器的功能,并允许我们对这些组件进行高度定制,本文将深入探讨如何在Vue应用中实现DateRange选择器的禁选功能,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了vant van-list下拉加载更多onload事件问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了vue element实现表格增加删除修改数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
今天小编就为大家分享一篇对Vue table 动态表格td可编辑的方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中的自定义分页插件组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了Vue项目打包到服务器后请求接口报错404的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
vue中使用input[type="file"]实现文件上传功能
这篇文章主要介绍了vue中使用input[type="file"]实现文件上传功能，实现代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了如何处理vue router 路由传参刷新页面参数丢失，对vue感兴趣的同学，可以参考下2021-05-05
最近有个需求，一个列表上下移动要有简单过渡效果。本文通过实例代码给大家介绍Vue 列表上下过渡效果,需要的朋友可以参考下2019-06-06
最新评论