Vue 2 中组件详解

在Vue 2中，组件是构建用户界面的基本单元。每个组件都是一个Vue实例，并且可以进一步分割为更小的组件。

组件的定义方式有两种：全局注册和局部注册。

全局注册是在Vue实例创建之前完成的，而局部注册是在创建组件的时候完成的。

以下是一个简单的Vue 2组件示例：

// 定义一个简单的Vue组件
Vue.component('my-component', {
  // 选项
  template: '<div>A custom component!</div>'',
  data() {
    return {
      // ...
    };
  },
  methods: {
    // ...
  }
});
 
// 创建Vue实例
new Vue({
  el: '#app'
});

在HTML中，你可以这样使用这个组件：

<div id="app">
  <my-component></my-component>
</div>

组件的生命周期钩子，如created, mounted, updated, 和 destroyed，在组件的不同阶段提供了钩子函数，你可以在这些函数中执行必要的逻辑。

Vue.component('my-component', {
  // ...
  created() {
    // 组件实例被创建后执行
  },
  mounted() {
    // 组件被挂载到DOM上后执行
  },
  // ...
});

Vue 2还支持单文件组件（.vue文件），它将模板、脚本和样式放在一个文件中，方便管理和维护。

<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello from Vue component!'
    };
  }
}
</script>
 
<style>
/* 样式 */
</style>

以上是Vue 2组件的基本概念和使用方法。