浅谈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 相关文章推荐
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
bootstrap css样式之表单
Jan 19 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
Jquery获取radio选中值实例总结
Jan 17 jQuery
layer扩展打开/关闭动画的方法
Sep 23 Javascript
Vue+ElementUI table实现表格分页
Dec 14 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
基于initPHP的框架介绍
2013/04/18 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
PHP常用函数之base64图片上传功能详解
2019/10/21 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
jQuery实现表单动态添加数据并提交的方法
2018/07/19 jQuery
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
Python 中的with关键字使用详解
2016/09/11 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python将string转换到float的实例方法
2019/07/29 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Python urllib2运行过程原理解析
2020/06/04 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
公司办公室岗位职责
2014/03/19 职场文书
暑期教师培训方案
2014/06/07 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
会议新闻稿
2015/07/17 职场文书
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js