浅谈vue-props的default写不写有什么区别
注意 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写不写有什么区别就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中使用localstorage来存储页面信息,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
循环使用v-for指令,v-for指令需要以site in sites形式的特殊语法,sites是源数据数组并且site是数组元素迭代的别名,下面这篇文章主要给大家介绍了关于Vue中v-for列表循环的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了浅谈Vue 性能优化之深挖数组，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-12-12
这篇文章主要介绍了在pycharm中开发vue的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
电商网站的首页内容会比较多，页面比较长，为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见，所以需要一个吸顶导航的效果。目标:完成头部组件吸顶效果的实现2023-04-04
这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Vue实例的选项有哪些，文中讲解非常细致，代码帮助大家更好的学习，感兴趣的朋友可以了解下2020-06-06
今天小编就为大家分享一篇用vue-cli开发vue时的代理设置方法，具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Pinia是一个同时支持Vue2和Vue3的应用状态管理工具,简单来说就是为了管理整个应用中的响应式数据,解决各个组件交互时数据状态的不好管理的问题,下面这篇文章主要给大家介绍了关于vue3搭配pinia踩坑的相关资料,需要的朋友可以参考下2022-04-04
这篇文章主要介绍了vue2+el-menu实现路由跳转及当前项的设置,方法实例代码详解，非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-11-11
最新评论