解决vue prop传值default属性如何使用,为何不生效的问题


Posted in Javascript onSeptember 21, 2020

如果在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属性如何使用,为何不生效的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
Aug 18 Javascript
Javascript连接Access数据库完整实例
Aug 03 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 Javascript
微信小程序实现日历签到
Sep 21 #Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 #Javascript
js实现购物车商品数量加减
Sep 21 #Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 #Javascript
You might like
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHP4之COOKIE支持详解
2006/10/09 PHP
PHP 已经成熟
2006/12/04 PHP
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
PHP教程 基本语法
2009/10/23 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
pandas基于时间序列的固定时间间隔求均值的方法
2019/07/04 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
军训学生自我鉴定
2014/02/12 职场文书
《童年》教学反思
2014/02/18 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
倡议书的写法
2014/08/30 职场文书
民间借贷协议书范本
2014/10/01 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
redis内存空间效率问题的深入探究
2021/05/17 Redis