vue 组件的暴露和引入方式

vue 组件的暴露和引入方式
在中，组件的暴露和引入主要有以下几种方式：
1. 全局暴露和引入
在 Vue 的全局范围内注册组件，所有 Vue 实例和组件都可以使用这个组件。

```javascript
// 暴露全局组件
('my-component', {
// 选项...
})
```
2. 局部暴露和引入
在 Vue 实例或组件的范围内注册组件，只有这个 Vue 实例或组件及其子组件可以使用这个组件。

```javascript
// 创建 Vue 实例
new Vue({
el: 'app',
components: {
'my-component': {
// 选项...
}
}
})
```
3. 使用 ES6 模块导出和导入
这是使用 ES6 模块语法来导出和导入组件的方式。

这种方式更符合现代JavaScript 的模块化标准，也有利于工具的自动打包和优化。

导出：
```javascript
//
export default {
name: 'MyComponent',
// ...其他选项...
}
```
导入：
```javascript
import MyComponent from './'
```
4. 使用 Vue Loader 进行导入
如果你在使用 Webpack 和 Vue Loader，你可以直接在 `.vue` 文件中导入其他 `.vue` 文件作为组件。

这种方式非常适合于大型项目中的组件复用和模块化。

在父组件中：
```vue
<template>
<div>
<my-component></my-component> </div>
</template>
<script>
import MyComponent from './'
export default {
components: { MyComponent }
}
</script>
```。