VUE学习笔记-深入组件(组件注册)

组件名(推荐a-b-c)

---

 

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

当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候：其他组件引用组件方式

我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)

定义组件名的方式有两种：

使用 kebab-case(短横线分隔命名):使用时候直接一样的名字,推荐写法

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

使用 PascalCase(首字母大写命名):

当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。

也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。

注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的(和angularjs一样)

Vue.component('MyComponentName', { /* ... */ })

全局注册:vue实例和子组件内也可以使用!

---

 

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

可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

这三个组件在各自内部也都可以相互使用

局部注册

---

 

 全局注册往往是不够理想的,webpack这样的系统内，会被包含在最终构建结果中,无谓的增加体积

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }//组件选项对象

//然后在初始化vue实例时候
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

局部注册的组件在其子组件中不可用,要强制用，下方这样写

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

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

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA   //本质:ComponetA:ComponetA 组件名和组件选项对象一样

}, // ... }

模块系统

---

在模块系统中局部注册

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

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

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

如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注册这些非常通用的基础组件

在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码

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

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