vue组件暴露和.js文件暴露接口操作

Vue组件暴露

在 Vue 的开发过程中，封装组件是必不可少的一项技能。将组件封装后，我们通常需要将组件暴露出来，使得其他地方可以引用使用。下面是Vue组件暴露的完整攻略：

1. 全局组件

在Vue中，我们可以使用Vue.component()方法来注册全局组件。这样注册后，整个应用的任何组件都可以使用这个组件。

// 定义全局组件
Vue.component("my-component", {
  template: "<div>This is a global component</div>"
})

// 应用中使用组件
<template>
  <my-component></my-component>
</template>

2. 局部组件

如果我们只想在某些页面或组件中使用某个组件，我们可以将其定义为局部组件。在 Vue 的实例或组件中定义一个组件时，它只能在这个实例或组件下才能使用。

// 定义局部组件
let myComponent = {
  template: "<div>This is a local component</div>"
}

// 在Vue中使用组件
new Vue({
  components: {
    myComponent
  }
})

// 在组件中使用局部组件
<template>
  <my-component></my-component>
</template>

.js文件暴露接口

在JavaScript开发中，将功能模块封装为一个独立的JS文件是很常见的情况，同时，我们也需要将这些文件暴露出来以供其它地方调用。下面是JS文件暴露接口操作的完整攻略：

1. CommonJS

在Node.js开发中，常用的暴露方式是CommonJS。使用module.exports将需要暴露的方法或对象挂在到exports对象上，可通过require()方法引入。

//math.js文件
exports.add = function (a, b) {
  return a + b;
};

exports.sub = function (a, b) {
  return a - b;
};

//app.js文件中引入
const math = require('./math');
console.log(math.add(1, 2)); // 3

2. ES6

在ES6中，我们可以使用export将需要暴露的方法或对象导出，可通过import语法引入。

//math.js文件
export function add(a, b) {
  return a + b;
}

export function sub(a, b) {
  return a - b;
}

//app.js文件中引入
import {add, sub} from './math.js';
console.log(add(1, 2)); //3