解决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 相关文章推荐
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
javascript数据类型验证方法
Dec 31 Javascript
前端性能优化及技巧
May 06 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
javascript数组定义的几种方法
Oct 06 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 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者的疑难问答(2)
2006/10/09 PHP
使用apache模块rewrite_module (转)
2007/02/14 PHP
php颜色转换函数hex-rgb(将十六进制格式转成十进制格式)
2013/09/23 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
为指定元素增加样式的js代码
2009/12/09 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
2013/01/04 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python第三方库的安装方法总结
2016/06/06 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
pandas的排序和排名的具体使用
2019/07/31 Python
Python3 venv搭建轻量级虚拟环境的步骤(图文)
2019/08/09 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
通用自荐信范文
2014/03/14 职场文书
选秀节目策划方案
2014/06/06 职场文书
公司授权委托书范本
2014/09/18 职场文书
2015大学生实训报告
2014/11/05 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
防暑降温通知书
2015/04/27 职场文书
少年犯观后感
2015/06/11 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
2016幼儿园毕业感言
2015/12/08 职场文书