全局注册组件

关注

原创最新推荐文章于 2026-03-24 00:41:00 发布 621 阅读 AI 写同款· GEO 优化 ›

VUE2.0组件的全局注册和局部注册 VUE2.0组件可以用javascript对象创建，也可以是vue文件即单文件组件(SFC)的形式，组件必须先注册再使用，组件的注册方式有两种，分别是：全局注册和局部注册。阅读详情

1、全局注册组件

import vue from 'Vue'

function changeStr(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}

const requireComponent = require.context('.', false, /\.vue$/);
console.log(requireComponent.keys())
requireComponent.keys().forEach(fileName => {

  const config = requireComponent(fileName);
  console.log(config)

  const componentName = changeStr(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  )
  console.log('componentName', componentName, config.default)
  if (componentName != 'Home') {
    vue.component(componentName, config.default || config)
  } else {
    console.log(fileName, 'ssss')
  }

});

2、引入路由

var routerList = []
function importAll(r){
  r.keys.forEach(
    el => routerList.push(r(key).default)
  );
}
importAll(require.context('./router',true,/\.routes\.js/))

3、render方法实现button 选择，v-if v-else-if v-else

<script>
export default {
  props: {
    type: {
      type: String,
      default: "normal"
    },
    text: {
      type: String,
      default: "normal"
    }
  },
  render(h) {
    return h("button", {
      class: {
        btn: true,
        warning: this.type === "warning",
        danger: this.type === "danger",
        success: this.type === "success"
      },
      domProps: {
        innerText: this.text
      },
      on: {
        click: this.handleClick
      }
    });
  },

  methods: {
    handleClick() {
      this.$emit("myEvent", { type: this.type });
    }
  }
};
</script>

<style >
.btn {
  width: 40px;
  height: 30px;
}

.warning {
  background: yellow;
}
.danger {
  background: red;
}
.success {
  background: green;
}
</style>

4 、权限控制

import { hasPromise } from './components/common/array'

export function hasPromise(key) {
  var arr = [1, 2, 3, 4, 5];
  let index = arr.indexOf(key);
  if (index > -1) {
    return true;
  } else {
    return false;
  }
}


//main.js 

Vue.directive('display-key', {
  inserted(el, binding) {
    let displayKey = binding.value;
    if (!hasPromise(displayKey)) {
      el.parentNode && el.parentNode.removeChild(el)
    } else {
      throw new Error('需要key')
    }
  }
})

5、watch

watch: {
    progress: {
      handler(oldVlau, newValu) {
        this.$refs.progress.style.width = val * 100 + "%";
      },
      immediate: true
    }
  },