Vue组件之Prop
在使用prop之前，先注意一下官网的命名提示：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
-
Prop的大小写
<template>
<div class="parent">
<!-- 在 HTML 中是 kebab-case 的 -->
<com-child :form-list='listData'></com-child>
</div>
</template>
Vue.component('com-child', {
// 在 JavaScript 中是 camelCase 的
props: ['formList'],
template: '<h3>{{ formList}}</h3>'
})
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
-
Prop类型
1、字符串数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
2、对象形式(每个 prop 都有指定的值类型)
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
-
传递静态或动态 Prop
给 prop 传入一个静态的值：
<com-child title="My journey with Vue"></com-child>
可以通过 v-bind 动态赋值：
<!-- 动态赋予一个变量的值 -->
<com-child v-bind:title="post.title"></com-child>
<!-- 动态赋予一个复杂表达式的值 -->
<com-child v-bind:title="post.title + ' by ' + post.author.name"></com-child>
-
单向数据流
引用官网：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
有两种常见的试图改变一个 prop 的情形：
1、这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
2、这个 prop 以一种原始的值传入且需要进行转换
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
-
Prop 验证
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字,当父组件没传值（传空值也算传了），则用默认值
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
type：可以是下列原生构造函数中的一个 ：
String
Number
Boolean
Array
Object
Date
Function
Symbol
还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认，具体可参考：类型检查
-
非 Prop 的特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
例如：通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件(或者ElementUI组件)，这个插件需要在其 <input> 上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上：
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
替换/合并已有的特性
<template>
<div class="child">
<input type="date" class="form-control">
</div>
</template>
<template>
<div class="parent">
<!-- 在 HTML 中是 kebab-case 的 -->
<com-child :form-list='listData' class='form-color'></com-child>
</div>
</template>
对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！class 和 style 特性会稍微智能一些，即两边的值会被合并起来。
禁用特性继承
首先假设有如下组件：
<template>
<div class="parent">
<com-child
:gender='customValidator'
:label='msg'
:value='parentString'
class='parentClass'
@input="getChildData">
</com-child>
</div>
</template>
<script>
customValidator:'success'
msg:'普通父组件',
parentString:'parent',
<script>
<template>
<label> {{ label }}
<input
v-bind="$attrs"
:value="value"
@input="$emit('input', $event.target.value)"
>
</label>
</div>
</template>
<script>
...
inheritAttrs: false,
props: {
label:{},
value:{}
}
<script>
html的结构如下：
image.png
现在我们将v-bind="$attrs"去掉又或者将他放到label标签上
html的结构如下：
image.png
注意： inheritAttrs: false 选项不会影响 style 和 class 的绑定。
子组件只会去继承未写在props中的某些特性
