vue-组件注册

1.0 局部注册

也叫局部引用，也就是某个或者某几个页面用到了一个组件

新建组件vb-divider 路径：src/components/global/vb-divider

在此路径新建index.vue 内容如下

<template>
  <div class="vb-divider">{{msg}}</div>
</template>

<script>
export default {
  name:'vb-divider',
  data() {
    return {
      msg: '我是分割线'
    }
  },
}
</script>
<style scoped>
.vb-divider{
  margin: 20px 0;
  border-top: 1px dashed #42b983;
}
</style>

在我们需要引入的组件里面引入即可使用

<template>
  <div class="home">
    <vb-divider></vb-divider>
  </div>
</template>
<script >
import vbDivider from '@/components/global/vb-divider'
export default {
  name: 'HomeView',
  components: {
    vbDivider
  },
}
</script>

2.0 全局注册

这个是重点因为我们都知道，局部组件的引用其实也就是 父子组件，这个所有人都熟悉，但全局引入的就不一定了

我们上面已经新建了 一个分割线的组件

怎么全局引入呢？

修改我们的入口文件 main.js

// 增加两行代码 引入组件和注册组件
import vbDivider from './components/global/vb-divider/index'

Vue.component('vb-divider',vbDivider)

然后我们就可以在我们的所有组件里面用它了

<vb-divider></vb-divider>

然后我们再新增一个组件 位置：src/components/global/vb-button

在此路径新建index.vue 内容如下

<template>
  <div class="vb-button">{{btnName}}</div>
</template>

<script>
export default {
  name:'vb-button',
  props:{
    btnName:{
      type:String,
      default:'我是按钮',
    }
  },
  data() {
    return {
      msg: '我是分割线'
    }
  },
}
</script>
<style scoped>
.vb-button{
  color: #409eff;
  background: #ecf5ff;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid #409eff;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: .1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  margin-right: 10px;
}
</style>

同样的全局注册它，也是在main.js里面

import vbDivider from './components/global/vb-divider/index'
import vbButton from './components/global/vb-button/index'

Vue.component('vb-divider',vbDivider)
Vue.component('vb-button',vbButton)

然后任何页面都可以用了,而且是想用几次就用几次

<vb-button btn-name="下一步"></vb-button>
<vb-button></vb-button>

然后我们再加一个组件....

啊？ 还要重复这一步骤，不都这么干的嘛！

那我这样干也没错，但是不优雅，如何优雅呢？

我们可以自动注册全局组件，所谓的自动就是说，我们已经确定了哪些组件需要全局注册，并且看我们的文件名 意思也很明确，这里就是放我们全局组件的地方，以后每加一个组件，我们不需要手动引入了，让代码替我们去注册。

新建文件 路径：src/components/global/index.js

/* 参数
*  directory:表示检索的目录；
*  useSubdirectories：表示是否检索子文件夹；
*  regExp:匹配文件的正则表达式,一般是文件名；
* */
const importFn = require.context('./', true, /.vue$/)

export default {
    install(app) {  // vue.use需要的 后续文章会介绍
        // 循环遍历每个vue组件的路径
        importFn.keys().forEach(key => {
            // 通过路径获得每个vue 组件
            const component = importFn(key).default
            // 注册
            app.component(component.name, component)
        })
    }
}

修改main.js

// import vbDivider from './components/global/vb-divider/index'
// import vbButton from './components/global/vb-button/index'
//
// Vue.component('vb-divider',vbDivider)
// Vue.component('vb-button',vbButton)
import globalComponent from './components/global/index.js'

Vue.use(globalComponent)

这样以后不管你在新增组件，都不需要手动注册了，是不是优雅了很多。

---- 每个人的生命中，都有最艰难的一年，将人生变得美好而辽阔。