03-深入了解组件-组件注册（注册方式）

大小写：

小写kebab-case或者PascalCase。eg：
my-component-name或者MyComponentName

字符串模板：就是反引号。
DOM：非字符串模板。

推荐：kebab-case，都能使用。

注册方式

全局注册：

注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

模板：

<div id="app">
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>
</div>


Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

new Vue({ el: '#app' })

例子：

<div id="app">
    <component-a></component-a>
    <component-b></component-b>

</div>

<div id="app2">
    <component-a></component-a>
    <component-b></component-b>

</div>

<script src="../vue.js"></script>
<script>

    Vue.component('component-a', {
        data() {
            return {
                msg: '组件1',
            }
        },
        template: `<div>{{msg}}</div>`
    })
    Vue.component('component-b', {
        data() {
            return {
                msg: '组件2',
            }
        },
        template: `<div>{{msg}}</div>`
    })
    
    var vm1 = new Vue({
        el: "#app",
    })
    var vm2 = new Vue({
        el: '#app2',
    })
</script>

局部注册：

<div id="app">
    <h3>app可以使用a，b组件</h3>
    <component-a></component-a>
    <component-b></component-b>

</div>

<div id="app2">
    <h3>app2-会报错，没有注册组件</h3>
    <component-a></component-a>
    <component-b></component-b>
</div>

<script src="../vue.js"></script>
<script>
    
    var componentA = {
        data() {
            return {
                msg: '组件1',
            }
        },
        template: `<div>{{msg}}</div>`
    }
    var componentB = {
        data() {
            return {
                msg: '组件2',
            }
        },
        template: `<div>{{msg}}</div>`
    }

    var vm1 = new Vue({
        el: "#app",
        components:{
            'component-a':componentA,
            'component-b':componentB,
        }
    })
    var vm2 = new Vue({
        el: '#app2',
        components:{
            // 'component-c':componentA,
            // 'component-d':componentB,
        }
    })
</script>

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

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

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

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

// componentB组件：
import ComponentA from './ComponentA.vue'

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

对比vue的admin-master项目，eg：
全局注册svg-icon组件：

// main.js中：

import SvgIcon from '@/components/SvgIcon'
// 注册全局svg-icon组件
Vue.component('svg-icon', SvgIcon)

// 使用：
<svg-icon :name="icon"></svg-icon>

局部注册card-title组件：

import CardTitle from '@/components/CardTitle'

export default {
	components: {
  		CardTitle
	},
}


// 使用：
<card-title :title="title" v-if="title" :icon="icon"></card-title>

模块系统中-注册方式

模块系统中，局部注册

例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

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

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

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

模块系统中，基础组件的自动化全局注册

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

例子：
https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/components/_globals.js
admin-master项目