vue-learning: 24 - component - directory

component assembly

1. The concept components
   Vue Vue components also are examples of acceptable options for the same objects option(except for some root level-specific options) and use the same lifecycle hook, and the template is called.
2. Construction and assembly registration
   • Construct:com = Vue.extend(option)
   • registered:
     • Global registration:Vue.component('my-com', com)
     • Local registration:vm.components: {'my-com': com}
   • Syntactic sugar: Vue.component('my-com',option) vm.components('my-com': option)
   • Component naming convention

3. Three components API: prop/ event/ slot
   prop

   • An array of strings: props: ['prop1', 'prop2', ...]
   • Object form:
     js props: {prop1: Number} props: { prop1: { type: [Number, String], required: true, default: 100, //当默认值是对象或数组时，必须从函数返回值获取 () => { return value } validator: (value) => { // do somethings return Boolean return result } } }
   • prop naming convention
   • Dynamic prop (except string, require the use of other types of incoming prop dynamic, i.e., v-bind binding)
   • Prop-way data flow and two-way binding .sync modifier
   • Non-prop properties
     • Be replaced or merged
     • Disable inheritance inheritAttr: false
     • $attr
   event
   • v-on / $on Monitor events
   • $once One-time event
   • $emit trigger event
   • $off Uninstall event listeners
   • $listeners v-on binding listener collection (except native listener events)
   • .native Native event modifier
   • .sync Two-way binding modifier
   • model Attributes
   slot
   • Ordinary Slot
     html <slot></slot>
   • Slot provides default values
     html <slot>default content</slot>
   • Named Slot
     html <slot name="someName"></slot> <!-- 组件调用 --> <my-com> <template v-slot:somName></template> <my-com>
   • Scope slot
     html <slot :prop="value"></slot> <!--组件调用 --> <my-com> <template v-slot='childValue'>{{ cilidValue.value}}</template> </my-com>
   • Exclusive default wording slot
     html <some-component v-slot="childValue"> {{ childValue.value }}</some-component> <some-component v-slot:default="childValue"> {{ childValue.value }}</some-component>
   • Deconstruction slot prop
     html <my-com v-slot="{value}">{{ value }}</my-com> <!-- 重命名 --> <my-com v-slot="{value: otherName}">{{ otherName }}</my-com> <!-- 重命名并提供默认值 --> <my-com v-slot="{value: {otherName: defaultValue}}">{{ otherName }}</my-com>
   • Dynamic Slot names
     html <my-com> <template v-slot:[dynamicSlotName]></template> </my-com>
   • v-slot Shorthand #
html <my-com> <template #somName></template> <my-com>
   • Template compilation scope
     sub-template compilation of all content is in the sub-domain action; parent template of all content is the parent role in the domain of compilation.
4. Dependency injection assembly
   • provide
   • inject
5. A reference component instance
   • ref / $refs
   • $root
   • $parent
   • $children
   • 自定义扩展方法
6. Communication between components
   • Sons communication component prop / $emit
   • Nested component $attrs/$liteners
   • Descendants of this component communication provide / inject
   • Component instance references $root/ $parent/ $children/$refs
   • Event Bus const Bus = new Vue()
   • State Manager Vuex
7. Dynamic Components<component is="com-name"></component>
8. Asynchronous componentfunction

9. Built-in components transiton/ keep-alive/component

10. other
    • Recursive call components
    • Cycle component reference
    • v-onceCreate a static component