Vue.component封装组件并注册使用

1.ConterContainer.vue

<template>
  <div class="conterContainer">
    <slot></slot>
  </div>
</template>
<script>
export default {};
</script>
<style>
.conterContainer {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  /* 子元素水平居中 */
  -webkit-justify-content: center;
  justify-content: center;
  -moz-box-pack: center;
}
</style>

2.index.js

import ConterContainer from './components/ConterContainer.vue'
export default {
    install: (Vue) => {
        Vue.component('ConterContainer', ConterContainer)
    }
}

3.main.js

import Plugin from '@/plugin/index.js'; 
Vue.use(Plugin);

4.可以直接在vue组件中使用了

<template>
  <ConterContainer>
      <h2></h2>
  </ConterContainer>
</template>
<script>
export default {};
</script>

最后

以上就是暴躁故事最近收集整理的关于Vue.component封装组件并注册使用的全部内容，更多相关Vue内容请搜索靠谱客的其他文章。