浅谈vue-props的default写不写有什么区别


Posted in Javascript onAugust 09, 2020

注意 default 不要写成 defaults

例如有一个名为mk-test的组件如下:

<template>
  <div>{{maxLength}}</div>
</template>
<script>
export default {
  props: {
    maxLength: {
      type: Number,
      default: 1
    }
  }
}
</script>

当父组件这样调用时:

<mk-test></mk-test>

渲染出来是:

1

如果把组件的default:1删除,父组件调用方式不变,此时渲染结果是:

0

此时如果父组件改成:

<mk-test maxLength="3"></mk-test>

此时渲染结果是:

3

自我总结:

1、使用default定义默认值时,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用默认值。

2、没有定义默认值时,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用的是该类型的默认值。类型及其默认值如下:

String ''

Number 0

Array []

Object {}

补充知识:Vue.js中的 new Vue() 和 export default {}区别

在生成、导出、导入、使用 Vue 组件的时候,常常被位于不同文件的 new Vue() 和 export default{} 。

首先,Vue 是什么? po 主的理解是 Vue 就是一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

所以渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面:

new Vue({
  el: '#app'
  ...
})

那么 export default {} 又是?

在复用组件的时候用到的。

假设我们写了一个单页面组件 A 文件,而在另一个文件 B 里面需要用到它,那么就要用ES6 的 import/export 语法 ,在文件 A 中定义输出接口 export **,在文件 B 中引入 import **,然后再生成一个 Vue 实例 new Vue (**),把引入的组件用起来,这样就可以复用组件 A 去配合文件 B 生成 html 页面了。

所以在复用组件的时候,export 和 new Vue 缺一不可。

以上这篇浅谈vue-props的default写不写有什么区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
Jul 17 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
基于JS代码实现导航条弹出式悬浮菜单
Jun 17 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
Aug 19 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
小试小程序云开发(小结)
Jun 06 Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 Javascript
js实现带有动画的返回顶部
Aug 09 #Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 #Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 #Javascript
vue 子组件watch监听不到prop的解决
Aug 09 #Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 #Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 #Javascript
bootstrap实现tab选项卡切换
Aug 09 #Javascript
You might like
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
第一个Vue插件从封装到发布
2017/11/22 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
Angular6封装http请求的步骤详解
2018/08/13 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
python求素数示例分享
2014/02/16 Python
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python 字典中取值的两种方法小结
2018/08/02 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Django choices下拉列表绑定实例
2020/03/13 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
继承权公证书
2014/04/09 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书