解决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 相关文章推荐
jQuery移除tr无效的解决方法(tr是动态添加)
Sep 22 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
vue动态禁用控件绑定disable的例子
Oct 28 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
axios解决高并发的方法:axios.all()与axios.spread()的操作
Nov 09 Javascript
JavaScript模拟实现网易云轮播效果
Apr 04 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
深入理解Python 代码优化详解
2014/10/27 Python
Python基于QRCode实现生成二维码的方法【下载,安装,调用等】
2017/07/11 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python命令行工具Click快速掌握
2019/07/04 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
小学家长评语大全
2014/04/16 职场文书
平安工地建设方案
2014/05/06 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
观看信仰心得体会
2014/09/04 职场文书
爱护公共设施演讲稿
2014/09/13 职场文书
初中中等生评语
2014/12/29 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
让人感觉高大上的讲话稿怎么写?
2019/07/08 职场文书
PHP解决高并发问题
2021/04/01 PHP
浅谈JS的原型和原型链
2021/06/04 Javascript
springboot中一些比较常用的注解总结
2021/06/11 Java/Android