[WIP] Vue assembly

Created: 2019/11/02

Component Registration

Component Name

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

The first argument that is component name, all lowercase letters as possible and must contain a hyphen

Global registration

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

Local registration

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

Modular system

Component parts Sign up

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

So, ComponentA and ComponentC can be used in the B

Automation components registered global basis

Global actions must be registered in the root Vue example (by new new Vue) occurred before the creation

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

Prop

prop的大小写

prop类型

传递静态或动态prop

单向数据流

prop验证

非prop的特性

自定义事件

插槽

动态组件&异步组件

处理边界情况

Guess you like