解决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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
微信小程序 wx.uploadFile无法上传解决办法
Dec 14 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
PHP解决中文乱码
2017/04/28 PHP
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
2011/10/21 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
2016/11/10 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
原生js实现验证码功能
2017/03/16 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
用Axios Element实现全局的请求loading的方法
2018/03/15 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:02:00]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第三场 1月24日
2021/03/11 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Django自定义分页与bootstrap分页结合
2021/02/22 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
Python中dict和set的用法讲解
2019/03/28 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
精伦电子Java笔试题
2013/01/16 面试题
2015年药店工作总结
2015/04/20 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Python学习之包与模块详解
2022/03/19 Python
Java Spring Lifecycle的使用
2022/05/06 Java/Android