vue 封装组件全局注册
时间: 2023-07-12 13:38:57 浏览: 50
要在 Vue 中封装一个组件并全局注册,可以按照以下步骤进行:
1. 创建组件文件,例如 MyComponent.vue。
2. 在组件文件中定义组件的模板、样式和逻辑。
3. 在组件文件的底部,使用 export default 将组件导出。
4. 在 main.js 文件中,使用 import 将组件引入。
5. 在 main.js 文件中,使用 Vue.component() 方法将组件全局注册。
例如,假设 MyComponent.vue 文件如下:
```
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
title: String,
content: String
}
}
</script>
<style>
/* 样式 */
</style>
```
然后在 main.js 文件中:
```
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
Vue.component('my-component', MyComponent)
new Vue({
el: '#app',
render: h => h(App)
})
```
这样,MyComponent 组件就被全局注册了,可以在任何地方使用 `<my-component>` 标签来使用它。