第一步：封装一个自动全局注册组件的逻辑

思路：定义三种组件类型，根据文件后缀去判断是那种类型，该如何注册

// 获取components目录下所有index文件
const files = require.context(
  '../components', // 获取这个目录下所有文件
  true, // 是否遍历子目录
  /^./(w*/)+index.(vue|js)$/
)
export default {
  install(Vue) {
    files.keys().forEach(path => {
      // console.log(this.fileType())
      const filetype = this.fileType(path, files(path))
      if (filetype === 'component') {
        this.useComponent(Vue, files(path))
      } else if (filetype === 'componentGroup') {
        this.useComponentGroup(Vue, files(path))
      } else {
        this.useServeApi(Vue, files(path))
      }
    })
  },
  // 类型判断  定义三种类型
  fileType(path, file) {
    if (path.lastIndexOf('.js') === -1) {
      return 'component'
    } else {
      if (file.default.install) {
        return 'serveApi'
      } else {
        return 'componentGroup'
      }
    }
  },
  // 普通组件
  useComponent(Vue, file) {
    const options = file.default
    const name = options.name
    Vue.component('md' + name, options)
  },
  // 组件api
  useServeApi(Vue, file) {
    Vue.use(file.default)
  },
  // 嵌套组件
  useComponentGroup(Vue, file) {
    const components = file.default
    for (const key in components) {
      const name = components[key].name
      Vue.component('md' + name, components[key])
    }
  }
}

// main.js 
import baseComponent from './plugins/baseComponent'
Vue.use(baseComponent)
// 这样的话就会自动全局注册，不用每个页面都去引用组件，也不用一个一个在main.js里面注册

然后就是组件的封装了

举个简单的列子，我在这里封装一个button

// components/Button/index.vue  这就是个普通组件

<template>
  <button class="btn" :class="newStyle" @click='getdata'>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    newStyle () {
      return {
        disabled: this.disabled
      }
    }
  },
  methods: {
    getdata() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.btn{
  width: 200px;
  height: 45px;
  border: 1px solid #ccc;
  background-color: #fff;
  &.disabled{
    opacity: 0.5;
    background-color: #ccc;
  }
}
</style>

// 在其他页面就可以直接调用了
<md-button @click="submint" disabled='true'>保存地址</md-button>

我定义的三个组件类型：index.vue就是普通组件，index.js就是api组件，多个vue文件就是嵌套组件

最后

以上就是斯文楼房为你收集整理的vue组件的封装第一步：封装一个自动全局注册组件的逻辑然后就是组件的封装了的全部内容，希望文章能够帮你解决vue组件的封装第一步：封装一个自动全局注册组件的逻辑然后就是组件的封装了所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。