vue组件的封装

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

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

// 获取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文件就是嵌套组件