解决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 相关文章推荐
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
node.js中的querystring.unescape方法使用说明
Dec 10 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
Jan 19 Javascript
JSONP跨域请求
Mar 02 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
如何实现js拖拽效果及原理解析
May 08 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
php正则表达式学习笔记
2015/11/13 PHP
详解YII关联查询
2016/01/10 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
vue 组件基础知识总结
2021/01/26 Vue.js
详解Python中heapq模块的用法
2016/06/28 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
python实现点对点聊天程序
2018/07/28 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python包的导入方式总结
2021/03/02 Python
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
大学毕业生个人总结
2015/02/28 职场文书
教师师德表现自我评价
2015/03/05 职场文书
无保留意见审计报告
2015/06/05 职场文书
淮海战役观后感
2015/06/11 职场文书