Vue.js 组件是该框架最强大的功能之一,能够扩展 HTML 元素并封装可重用的代码。
通过组件系统,我们可以使用独立可复用的小组件来构建大型应用,几乎任何类型的应用的界面都可以抽象为一个组件树。
全局组件能够被所有实例使用,注册全局组件的语法格式为:
Vue.component(tagName, options),其中 tagName 是组件名,options 是配置选项。注册后,我们可以使用来调用组件。
局部组件只能在某个实例中使用,可以在实例选项中注册局部组件。注册局部组件的语法格式为:components: {'kxdang': Child},其中 'kxdang' 是组件名,Child 是组件定义。注册后,在实例的模板中可以使用来调用组件。
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 prop。
使用 v-bind 动态绑定 props 的值到父组件的数据中,每当父组件的数据变化时,该变化也会传导给子组件。
为了定制 prop 的验证方式,组件可以为 props 指定验证要求,可以指定 prop 的类型、是否必填、默认值等信息,并可以自定义验证函数。当 prop 验证失败时,Vue 将会产生一个控制台的警告。
type 可以是下面原生构造器:String、Number、Boolean、Array、Object、Date、Function、Symbol。type 也可以是一个自定义构造器,使用 instanceof 检测。