1-2vue实例属性Prop

代码链接：https://github.com/yuanxiaorui/vue-study/blob/master/guide/vue-props.html

1、Prop 的大小写 (camelCase vs kebab-case)

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

001.png

2、Prop 类型

  String、Number、Boolean、Array、Object

···
title="我是标题" //传入一个字符串
:num="nums"
:show="isshow"
:todos="todos"
:author="author">

props: {
nums:2, //传入一个数字
isshow:true, //传入一个Boolean
todos:['js','css','html'], //传入一个数组
author: { name: 'Veronica', company: 'Veridian Dynamics' }
}
···

3、Prop 验证

2.png

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

4、非 Prop 的特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

换/合并已有的特性：

对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来

禁用特性继承：

A、如果你不希望组件的根元素继承特性，你可以设置在组件的选项中设置 inheritAttrs: false
B、有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素