prop 是什么
prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
如何使用 prop
- 在组件内部，使用
props选项来定义好，当前组件需要用到的参数 - 调用组件的时候，在组件的标签上面，通过自定义属性来传递
prop
new Vue({
el: '#app',
components: {
helloWorld: {
props: ['title'],
data: function() {
return {
msg: '张三'
}
},
template: `
<div>{{ msg }}</div>
`
}
}
})
<div id="app">
<hello-world title="我的天呀"></hello-world>
</div>
props 的定义有几种
两种
- 数组的方式
props: ['title', 'xxx']
- 对象的方式 （这种方式能够实现 prop 的验证）
props: {
title: String,
// 对象或数组默认值必须必须传递一个函数，然后返回默认值
xxx: {
type: Object,
default: function() {
return { message: 'hello' }
}
},
// 自定义验证函数
yyy: {
validator: function(value) {
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
非 Prop 的特性
如果使用组件时，传递的某个属性，在组件中没有定义这个属性的prop的话，那么这个属性就是一个 非 prop 的特性。非 prop 的特性 会自定添加到组件的 根元素 上面。
替换/合并已有的特性
默认情况下，非 prop 的特性 会直接替换 组件的 根元素 上面的相同名字的属性。（如下代码，最终渲染在浏览器中的
hello组件的根元素的id值将会是hhh）。但如果是class或者style的话将会对两边的值做一个合并。
Vue.component('hello', {
template: `
<div id="box">我的天呀</div>
`
})
<div id="app">
<hello id="hhh"></hello>
</div>
禁用特性继承
如果不希望组件的根元素继承特性，你可以设置组件的 inheritAttrs 选项为 false
Vue.component('hello', {
inheritAttrs: false
})
$attrs 与 禁用特性继承 来实现 基础组件
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})
<base-input
v-model="username"
class="username-input"
placeholder="Enter your username"
></base-input>
PS:
- prop 是不能主动修改的
- prop 定义时如果是 驼峰 命令方式，那么使用的时候需要为 短横线 方式，与组件一样在3种特殊情况下，不需要。
