组件的深入了解

1：组件注册：

# 组件名问题：可以使用kebab-case、PascalCase两种命名方式。建议使用kabab-case。

# 全局注册：通过Vue.component('xxx',{...})的方式注册的组件，可以用在任何Vue根实例的模板中。并且，多个组件在各自内部也可以相互使用（这一点待深入理解）。

注意，全局注册必须在根实例创建之前进行。

# 局部注册：全局注册的组件有时不够理想。比如，使用webpack来构建时，全局注册的组件，不管不再使用了，它仍然包含在构建结果中。这时可以使用局部注册的方式。

局部注册的组件，组件之间不能直接调用。需要调用的话，在组件的定义对象中，使用components属性进行引用。

2：通过Props向子组件传递数据：

将Prop成为特性。

# Prop：指的是可以在组件上注册的一些自定义特性。当一个值传递给一个Prop特性时，它就变成了组件实例的一个属性。组件定义时，通过props选项来将要定义的特性包含在该组件

可接受的prop列表中。如：props: ['aaa','bbb','ccc']。任何值都可以传递给任何prop。在组件实例中，可以访问这些值，如同访问data中的值一样。

# Prop的大小写：HTML中的特性名是大小写不敏感的。浏览器会把所有大写字符解释为小写字符。所以，在使用DOM中的模板时，要使用kebab-case命名。而使用字符串模板的话，就没什么

限制。

# Prop类型：前面都是使用字符串数组列出prop。如果希望每个prop都有指定的值类型时，可以以对象形式列出prop。这时，属性名和值对应prop各自的名称和类型。这样也可以进行类型检查

和其他的prop验证。

# 传递静态或动态prop：在组件使用时，直接使用prop值作为属性，为静态传值。使用v-bind: 的形式为动态传值。需要注意，当传递的值是JavaScript表达式时，不要用静态传值方式。

使用v-bind:来告诉Vue，这是一个JavaScript表达式而非是一个字符串。否则，静态传递，例：<component-name aaa="false"></component-name>，aaa得到的不是布尔值，

而是一个字串"false"。 除了字符串外，可以传入数值、布尔值、数组、对象。

具体参考：https://cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop

# 单向数据流：单向下行绑定：父级prop的更新会向下流到子组件中，反之不行。当每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。

注意，JavaScript中的复合数据类型，如数组和对象，都是通过引用传入的。所以，对于一个数组或对象类型的prop来说，在子组件中改变这个对象或数组本身，将会影响到父组件。

对于下面两种常见的，需要改变prop的情形，建议使用对应的解决方式：

1.prop用来传递一个初始值，子组件希望其作为本地的一个prop数据来使用。此时，最好定义一个本地的data属性，并将这个prop用作其初始值：

props: ['initialCounter'],

data: function(){

return {

counter: this.initialCounter

}

}

2.prop以原始的值传入，并且需要进行转换。 此时，最好使用这个prop的值 来定义一个计算属性：

props:['size'],

computed: {

normalizedSize: fucntion(){

return this.size.trim().toLowerCase()

}

}

# prop验证：为props中的值 提供一个带有验证需求的对象，而非字符串数组。

Vue.component('my-component', {

props: {

// 基础的类型检查 (`null` 匹配任何类型)

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 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

# 类型检查

type 可以是下列原生构造函数中的一个：

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

另外，还可以是自定义的构造函数，会通过instanceof来进行检查。如：function Person(name){this.name = name}

可以使用:props:{

author: Person

}

这样来验证author prop的值是否是通过new Person创建的。

# 非porp的特性：指的是传向一个组件，但该组件中并没有对应prop的特性。

prop用于向子组件传递信息，然而组件创作时，可能无法预想到全部情况。所以，组件被设计为可以接受任何的特性。这些特性会被添加到组件的

根元素上。这里根元素就是对应模板的最外层元素。一个组件只能有一个根元素。

# 替换/合并已有特性（非prop）：组件中定义的特性（非prop），对于style 和class，如果特性和模板中的属性重名了，渲染后会将他们的值合并。

而对于其他的属性和特性重名的话，特性会替换属性。

#禁用特性继承（非prop）：如果不希望组件的根元素继承特性，在组件定义时可以设置：inheritAttrs: false。这一点配合实例的$attrs属性使用较多。

$attrs属性包含了传递给一个组件的特性名和特性值。如：{class:'username-input', placeholder:'Enter your username'}

比如，在编写基础组件时，常会使用到。如下：

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>`

})

3:自定义事件

# 事件名：推荐使用kebab-case命名方式。