组件

• 要注册一个全局组件，你可以使用Vue.component(tagName, options)
• 不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用
• 通过Vue构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数
• 通过prop来向组件传递数据，以camelCased (驼峰式) 命名的 prop 在组件上需要转换为相对应的kebab-case (短横线隔开式) 命名

<child my-message="hello!"></child>
Vue.component('child', {
    // camelCase in JavaScript
    props: {
        propB: [String, Number],
        propE: {
            type: Object, // 类型
            required: true, // 是否必传
            // 默认值
            default: function () {
                return {
                    message: 'hello'
                }
            },
            // 验证值是否符合要求
            validator: function (value) {
                return value > 10
            }
        },
    },
    template: '<span>{{ myMessage }}</span>'
})

• 当给组件增加同名已有属性时，一般情况会覆盖已有属性的值，style和class属性会采取合并的方式。
• 子组件通过$emit('myEvent',args)来向父组件发送事件，父组件通过v-on:myEvent来接收子组件事件和参* 数。语法糖 .native实现原生DOM事件，.sync实现双向prop绑定
• 非父子组件之间通过bus.$emit('id-selected') 和 bus.$on('id-selected', function () {})来通信
• slot 用来混合父组件的内容与子组件自己的模板。如果子组件模板中的slot标签没有内容，则使用父组件内子组件挂载点标签内的内容来替代子组件模板中的slot标签，可以给slot加name属性指定具体的替换内容
• 子组件模板中的slot标签结合父组件内子组件挂载点标签的template标签可以实现向子组件传值的效果（类似props）
• 动态组件：多个组件放在一个<component> 元素挂载点下，使用v-bind:is=”组件名”来决定显示哪个组件，也可以直接把组件对象赋值给is。keep-alive参数可以将切换出去的组件保存在内存中，避免重复渲染
• 重用的组件应该包含props, events 和slots三部分
• 尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID

<div id="parent">
     <user-profile ref="profile"></user-profile>
</div>

• 异步组件即按需加载组件。Vue 允许将组件定义为一个工厂函数，动态地解析组件的定义

Vue.component(
    'async-webpack-example',
    () =>
    import ('./my-async-component')
)
new Vue({
    components: {
        'my-component': () =>
            import ('./my-async-component')
    }
})

• 递归组件：组件内使用自身。如果使用不谨慎, 递归组件可能导致死循环