什么是Vue组件？如何定义一个组件？

Vue 组件是 Vue.js 最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。
在 Vue 中,一个组件本质是一个拥有预定义选项的一个Vue实例。

组件可以像HTML元素一样使用:

<my-component></my-component>

但实际上它的实现需要通过创建一个Vue对象/实例完成:

Vue.component('my-component', {
  data() {
    return {
      msg: 'Hello!'
    }
  },
  template: '<div>{{ msg }}</div>'
});

关于如何定义一个组件,有以下方式:

1. 使用 Vue.component() 全局注册:

Vue.component('my-component', {
  // 选项
})

2. 在实例中注册组件:

var vm = new Vue({
  components: {
    'my-component': {
      // 选项
    }
  },
  // ...
})

3. 使用官方扩展 .vue 文件中的组件:

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello!'
    }
  }
}
</script>

然后在其他组件中导入并注册:

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  } 
}

4. 局部注册:在父组件模板中直接使用未注册的组件,它只在该父组件中可用:

var vm = new Vue({
  template: '<my-component />',
  components: {
    'my-component': {
      /* 组件选项 */      
    }
  }
})

组件选项中最常见的有:

• template:模板
• data:数据
• methods:方法
• computed:计算属性
• components:子组件
• props:接受外部数据

组件是 Vue.js 最强大的功能之一,可以灵活定义和复用各种组件来构建大型应用。