浅谈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脚本
Dec 12 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php 分页原理详解
2009/08/21 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
JS判断当前日期是否大于某个日期的实现代码
2012/09/02 Javascript
javascript获取下拉列表框当中的文本值示例代码
2013/07/31 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
2016/02/17 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
2016/08/16 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python爬虫实战:分析《战狼2》豆瓣影评
2018/03/26 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
护理专业大学生自我推荐信
2014/01/25 职场文书
《威尼斯的小艇》教学反思
2014/02/17 职场文书
天下第一关导游词
2015/02/06 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
党小组意见范文
2015/06/08 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
Redis全局ID生成器的实现
2022/06/05 Redis