解决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 Prototype 对象扩展
May 15 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 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 中文和编码判断代码
2010/05/16 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
javascript简单进制转换实现方法
2016/11/24 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue 挂载路由到头部导航的方法
2017/11/13 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
[10:18]2018DOTA2国际邀请赛寻真——找回自信的TNCPredator
2018/08/13 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
基于Python的接口测试框架实例
2016/11/04 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python进行TCP端口扫描的实现
2018/12/21 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
计算Python Numpy向量之间的欧氏距离实例
2020/05/22 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
ORACLE十问
2015/04/20 面试题
大专毕业自我鉴定
2014/02/04 职场文书
团代会开幕词
2015/01/28 职场文书
高中团支书竞选稿
2015/11/21 职场文书
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS