Vue2.0学习-2-深入了解组件--1--组件注册

(day9-1)

组件名、全局注册、局部注册、模块系统。

一、组件名

 Vue.component()，里面第一个参数，就是组件名，有两种定义方式：

• 使用kebab-case，也就是使用横线连接：my-component-name；
• 使用PascalCase，也就是首字母大写的驼峰写法：MyComponentName。

二、全局注册

 前面学到的定义组件的方式，都是全局注册方式。

这种注册方式有种弊端，所以才会使用 局部注册。

三、局部注册

在使用一个像webpack这样的构建系统时，全局注册意味着即便你已经不使用某个组件了，它仍然会被包含在你最终的构建结果中。这会造成用户下载的JavaScript的无谓增加。 

这些情况下，使用局部 注册的方式：
# 先通过一个普通的JavaScript对象来定义组件：

var ComponentA = {/*...*/}
var ComponentB = {/*...*/}
var ComponentC = {/*...*/}

# 然后在 Vue 实例中的components 选项中定义想用的组件：

new Vue({
    el:"#app",
    components:{
        'component-a',ComponentA,
        'component-b',ComponentB,
        'component-c',ComponentC
    }
});

注意：局部注册的组件在其子组件中不可用。
如果你想要上面的ComponentA 在ComponentB中可以使用，那么就要像下面这样写：

var ComponentA = {/*...*/}

var ComponentB = {
    components:{
        'component-a':ComponentA
    }
    //....
}

四、模块系统 

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

# 在模块系统中局部注册

如果你使用了诸如Babel 和 webpack的模块系统，在这些情况下，推荐创建一个 components 目录，并将每一个组件放置到其各自的文本中。

然后在局部注册之前导入你想使用的组件。例如，在一个ComponentB.js或ComponentB.vue中：

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

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

这样ComponentA 和ComponentC都可以在ComponentB的模板中使用了。

# 基础组件的自动化全局注册

有很多组件，只是包裹了一个输入框或按钮 之类的元素，是相对通用的，我们称之为基础组件。

它们会在各个组件中被频繁使用到，所以会导致很多组件包含一个基础组件的长列表。

如果你恰好使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：

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
  )
})

(这些知识点还需要在学习webpack的时候在回来读一读)

 记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。