解决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跨域请求的4种解决方式
Mar 17 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
jQuery Easyui快速入门教程
Aug 21 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 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
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
Prototype Number对象 学习
2009/07/19 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
jQuery 无刷新分页实例代码
2013/11/12 Javascript
jQuery中noConflict()用法实例分析
2015/02/08 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
JavaScript实现音乐导航效果
2020/11/19 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
[41:13]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第一场 11.20
2020/11/20 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python操作MySQL数据库的方法分享
2012/05/29 Python
跟老齐学Python之复习if语句
2014/10/02 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python3 爬取图片的实例代码
2018/11/06 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
Petmate品牌官方网站:宠物用品
2018/11/25 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
会计主管岗位职责范文
2013/11/08 职场文书
学院书画协会部门职责
2013/11/28 职场文书
班级德育工作实施方案
2014/02/21 职场文书
物理教学随笔感言
2014/02/22 职场文书
喝酒检查书范文
2014/02/23 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
中层干部考核评语
2015/01/04 职场文书
小学生暑假安全公约
2015/07/14 职场文书