vue -- 注册组件

一、全局组件

1、组件名称

命名的时候：串联或者驼峰

component-name
componentName

使用的时候必须全部小写串联

<component-name></component-name>

注册方式

全局注册的组件一定要写在vue实例之前，否则没有效果，全局组件可以在所有组件中使用

Vue.component('componentName',{
    // options，这里其实相当于一个extends对象
})

二、局部组件

1、子组件

有点类似创建一个extends拓展，子组件只能在注册的组件里面使用

let componentName = { /* options */ }

// 声明的子组件必须在vue实例中注册了才能使用
let app = new Vue({
    components: {
        'div': componentName
    }
})

2、公共组件

其实每一个vue文件都可以看作是一个组件，我们可以引入这个vue文件，在想要展示页面展示出来

import ComponentName from '../components/mycomponent.vue'

// 注册组件
let app = new Vue({
    components: {
        'div':  ComponentName
    }
})

// 在vue-cli里面经常这么写
export default {
    components: {
        ComponentName   => // 这个是es6的写法好像，如果key和value是一样的，则可以直接写value，不用再写key
    }
}

三、自动化全局注册基本组件

通过require.context来全局注册这些常用基础组件

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

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

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

  // 取得组件的 Pascal 式命名
  const componentName = upperFirst(
    camelCase(
      // 将文件名前面的 `./` 和扩展名剥离
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 以全局方式注册组件
  Vue.component(
    componentName,
    // 如果组件是通过 `export default` 导出，
    // 则在 `.default` 中，查找组件选项，
    // 否则回退至模块根对象中，查找组件选项
    componentConfig.default || componentConfig
  )
})