本文共 2111 字，大约阅读时间需要 7 分钟。

注册方式

全局注册

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

/*javascript*/Vue.component('component-a', {
    /* ... */ })Vue.component('component-b', {
    /* ... */ })Vue.component('component-c', {
    /* ... */ })new Vue({
    el: '#app' })

//html
   
  
      
      
    
   

局部注册

局部注册的组件在其子组件中不可用。

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

//htmlnew Vue({  el: '#app',  components: {    'component-a': ComponentA,    'component-b': ComponentB  }})

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

模块注册

/*javascript*/import ComponentA from './ComponentA'import ComponentC from './ComponentC'export default {
     components: {
       ComponentA,    ComponentC  },  // ...}

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

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

可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。

所以会导致很多组件里都会有一个包含基础组件的长列表：

import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default {
     components: {
       BaseButton,    BaseIcon,    BaseInput  }}

而只是用于模板中的一小部分：

幸好如果你使用了 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.replace(/^\.\/(.*)\.\w+$/, '$1')    )  )  // 全局注册组件  Vue.component(    componentName,    // 如果这个组件选项是通过 `export default` 导出的，    // 那么就会优先使用 `.default`，    // 否则回退到使用模块的根。    componentConfig.default || componentConfig  )})

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。这里有一个真实项目情景下的示例。

转载地址：https://pandora.blog.csdn.net/article/details/88094167 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！