vue基础系列（三）组件components（2）——组件注册与props

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

二、注册组件

1、组件名

Vue.component('组件名'，{    })

①全小写字母+至少一个连字符：引用时也必须使用此名

②大驼峰命名：引用时，可以是大驼峰，也可以是全小写+连字符

2、全局注册

全局注册：在注册之后可以用在任何新创建的Vue根实例中，在子组件各自内部也可以相互使用。

Vue.component('name-a',{ ... })
new Vue({el:'#app'})         //用在新创建的根实例中

3、局部注册

局部注册的组件在其子组件中不可用。通过普通的JS对象来定义组件，然后在components中定义想要使用的组件

var ComponentA ='{  }'
var ComponentB ='{  }'
 
var vm =new Vue({
    el:'#app',
    components:{
        'component-a' : ComponentA
})

若要在ComponentB中使用ComponentA，则要在定义ComponentB时，将B加入components。

4、模块系统

创建一个components目录，并将每个组件放在各自的文件中。 在局部注册之前导入每一个想要使用的组件：

import ComponentA from './ComponentA'
 
export default {
  components: {
    ComponentA
  },}    //A可以在B中使用了

5、基础组件的自动化全局注册

基础组件：相对通用的组件，被频繁使用，如输入框或按钮。全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

三、Prop

1、Prop的大小写

在JS中，Props使用小驼峰命名，而在HTML中，需要使用kebab-case（短横线分隔）命名。

2、Prop类型

可以设置Prop各自的名称和类型

props:{
    title:String,
    lieks:Number
    }  

任何类型的值都可以传递给prop，Number,String等数据类型（Boolean类没有值时默认true），对象、数组等引用类型都可以。

3、单向数据流

单向下行绑定：父级 prop 的更新会向下流动到子组件中，不能在一个子组件内部改变 prop，这样会在控制台发出警告。

4、Prop验证

可以为props中的值提供一个带有验证需求的对象。当验证失败时，会产生一个控制台的警告

Vue.component('my-component', {
  props: {
    propA: Number,    // 多个可能的类型
    propB: [String, Number],       // 必填的字符串
}})

这里的type可以是原生的类型，还可以是一个自定义的构造函数，来验证prop值是通过构造函数创建的

5、禁用特性继承

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false