浅谈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 jquery做的图片连续滚动代码
Jan 06 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
深入理解node.js之path模块
May 03 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
Vue项目History模式404问题解决方法
Oct 31 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
May 29 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
phpfans留言版用到的install.php
2007/01/04 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php创建sprite
2014/02/11 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python保存字符串到文件的方法
2015/07/01 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python虚拟环境迁移方法
2019/01/03 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python基于socket函数实现端口扫描
2020/05/28 Python
python中pop()函数的语法与实例
2020/12/01 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
文明之星事迹材料
2014/05/09 职场文书
个人承诺书怎么写
2014/05/24 职场文书
2014年销售部工作总结
2014/12/01 职场文书
银行安全保卫工作总结
2015/08/10 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
关于EntityWrapper的in用法
2022/03/22 Java/Android
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server