在 Vue.js 2 中，自定义组件是一种非常强大的功能，允许你创建可重用的代码块，这些代码块可以被多次使用在同一个或不同的 Vue 应用中。自定义组件可以是全局的或局部的。

1. 创建自定义组件
首先，你需要创建一个 Vue 组件。一个基本的 Vue 组件由一个 .vue 文件组成，该文件包含三个部分：<template>, <script>, 和 <style>。

示例：创建一个简单的按钮组件
ButtonComponent.vue

<template>
 <button @click="handleClick">{{ text }}</button>
</template>

<script>
export default {
 name: 'ButtonComponent',
 props: {
   text: {
     type: String,
     default: 'Click Me'
   }
 },
 methods: {
   handleClick() {
     this.$emit('clicked');
   }
 }
}
</script>

<style scoped>
button {
 background-color: #42b983;
 color: white;
 border: none;
 padding: 10px 20px;
 cursor: pointer;
}
</style>

2. 使用自定义组件
2.1全局注册组件
你可以使用 Vue.component 方法全局注册组件，这样你就可以在任何新的 Vue 根实例的模板中使用这个组件。

main.js

import Vue from 'vue'
import App from './App.vue'
import ButtonComponent from './components/ButtonComponent.vue'

Vue.component('ButtonComponent', ButtonComponent);

new Vue({
 el: '#app',
 render: h => h(App)
});

2.2局部注册组件
或者，你可以在父组件中局部注册组件，这样组件只能在注册它的那个组件的模板中使用。

App.vue

<template>
 <div id="app">
   <ButtonComponent @clicked="onButtonClick" text="Press Me"></ButtonComponent>
 </div>
</template>

<script>
import ButtonComponent from './components/ButtonComponent.vue'

export default {
 name: 'App',
 components: {
   ButtonComponent
 },
 methods: {
   onButtonClick() {
     alert('Button was clicked!');
   }
 }
}
</script>

3. 使用 Props 和 Events 在组件间通信
在上面的 ButtonComponent 示例中，我们使用了 props 来传递文本内容，并使用 $emit 来触发一个事件。这是 Vue 中组件间通信的常用方式。你可以通过监听这些事件在父组件中响应它们。例如，我们在 App.vue 中监听了 clicked 事件。

结论
自定义组件是构建 Vue 应用的核心部分，通过创建可复用的组件，你可以提高开发效率和应用的维护性。通过全局或局部注册组件，你可以根据需要灵活地在你的应用中使用它们。