解决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 拾漏补遗
Dec 27 Javascript
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
form表单只提交数据而不进行页面跳转的解决方案
Sep 18 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
vuex state中的数组变化监听实例
Nov 06 Javascript
JavaScript实现轮播图效果
Oct 30 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代码审核的详细介绍
2013/06/13 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
javascript textContent与innerText的异同分析
2010/10/22 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
vue路由中前进后退的一些事儿
2019/05/18 Javascript
浅谈vue-props的default写不写有什么区别
2020/08/09 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2全新版本永雾林渊开启新篇章
2020/12/24 DOTA
python中引用与复制用法实例分析
2015/06/04 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
jupyter 导入csv文件方式
2020/04/21 Python
python属于解释语言吗
2020/06/11 Python
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
霸气押韵的班级口号
2014/06/09 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
加薪申请报告范本
2015/05/15 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
班级联欢会主持词
2015/07/03 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
防震减灾主题班会
2015/08/14 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL