Vue 组件

1. 组件注册

1.1 组件名

由于在 DOM 中只有 kebab-case 是有效的，因此组件名最好用 kebab-case 命名方式，如全局注册：

Vue.component('my-component-name', { /* ... */})

1.2 全局注册与局部注册

全局注册

Vue.component('component-1', { /* ... */ })
Vue.component('component-2', { /* ... */ })
Vue.component('component-3', { /* ... */ })

new Vue({el: "#app"})	// 根实例

<div id="app">
    <component-a></component-a>
    <component-b></component-b>
    <component-c></component-c>
</div>

局部注册

全局注册导致用户会多下载不需要的组件，局部注册可以节省流量：

let componentA = { /* ... */}
let componentB = { /* ... */}
let componentC = { /* ... */}

// 在 components 选项中添加需要的组件
new Vue({
    el: "#app",
    components: {
        'component-a': componentA,
        'component-b': componentB,
        'component-C': componentC
    }
})

注意：局部组件在其它子组件中不可用，除非将它放入到 components 选项中！

1.3 模块系统

通过 import / require 使用一个模块系统。

在模块系统中局部注册

推荐创建一个 components 目录，将所有组件放在其中。

在局部注册 ComponentC 时，当需要使用 ComponentA 模块，可以从ComponentA.js或 ComponentA.Vue导入模块：

import ComponentA from './ComponentA'
import ComponentB from './ComponentB'

export default {
    components: {
        ComponentA,
        ComponentB
    }
}

此时，可以在 ComponentC 中使用模块 ComponentA 和 ComponentB。

2. Prop

2.1 prop 命名

由于 DOM 模板对大小写不敏感，因此会把所有大写转为小写，因此camelCase 命名法的变量要与 kebab-case 命名一致 ！

Vue.component('blog-post', {
    props: ['postTitle']
})

<blog-post post-title="hello"></blog-post>

2.2 prop 类型

可以指定类型：

Vue.component('blog-post', {
	props: {
        title: String,
        index: Number, 
        isPublished: Boolean,
        author: Object
    }            
})

还可以设置是否 required、default 值：

Vue.component('blog-post', {
    props: {
        title: {
            type: String,
            required: true
        },
        isPublished: {
            type: Number,
            dedault: false
        }
    }
})

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

3. 单文件组件

由于使用 Vue.component 来定义组件要求组件名不重父、字符串模板无法高亮显示且不支持 CSS，具有很大的限制，使用 .Vue 的但文件组件解决了这些问题。

下面是一个名为 Hello.vue 的简单实例：

也可以将上面的但文件组件的 JavaScript 和 CSS 分离为独立文件：

<template>
<p> {{greeting}} </p>
</template>

<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

补充：在 style 后加上 scoped 可以设置样式局部有效

<style scoped>

</style>