组件名
两种方式: kebab-case 和 PascalCase。 也就是说 my-component-name 和 MyComponentName 都是可接受的。
prop
两种方式: (kebab-case 和 camelCase)。
类型(8个): Number Boolean String Symbol ,还有Array Object Function Date
???基本数据类型 还有 Null Undefined
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
}
}
}
父子组件通信 是一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
.sync修饰符
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。
组件数据
组件的data 和 实例的data 有点不一样,实例中的data 可以是一个对象, 但是组件的data 必须是一个方法。
动态组件
在一个多标签的界面中使用 is attribute 来切换不同的组件:
// component 是一个占位符, :is属性,可以用来指定要展示的组件名称
<component v-bind:is="currentTabComponent"></component>
当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。---- 保留组件 缓存
<!-- 失活的组件将会被缓存!-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
注意: 和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。