vue.use()，install()，Vue.component

75 阅读 0 评论 50 点赞

我是靠谱客的博主光亮铅笔，这篇文章主要介绍vue.use()，install()，Vue.component，现在分享给大家，希望可以做个参考。

作用：1.自己创建组件，然后在项目中全局引用。2.组件按需引用

一、自己创建组件 c-button.vue

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <button>cgb</button>
</template>

<script>
export default {
  name:'CButton'
}
</script>

<style>

</style>

二、创建一个JS文件 index.js

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import CButton from './c-button.vue';

const components = [CButton];

const CgbUI = {
  install(Vue) {
    // 注册组件
    components.forEach(component => {
      Vue.component(component.name, component);
    })
  }
}

export default CgbUI;

三、main.js中添加以下代码

复制代码

1
2
3
import CgbUI from './components/index.js';

createApp(App).use(CgbUI).mount('#app');

四、就可以引用了

复制代码

1
2
3
4
5
6
7
8
<template>
  <c-button></c-button>
</template>
<script>
import { defineComponent} from 'vue';
export default defineComponent({
});
</script>