组件基础

为什么要设计组件

Vue设计组件的目的是为了提高代码的可组合性、可复用性和可维护性。组件化开发是一种将复杂的用户界面划分为独立、可重用部件的方法，使开发人员可以更加高效地构建复杂的应用程序。

通过将界面划分为多个组件，每个组件专注于特定的功能和责任，开发人员能够更好地组织和管理代码。组件可以被独立开发、测试和维护，从而提高开发效率和团队协作。

此外，Vue的组件化开发使得界面更易于扩展和定制化。开发人员可以根据应用的需求，自由组合、嵌套和复用各种组件，构建出满足用户需求的灵活、可定制的界面。

• 提高复用性
• 提高可扩展性

什么叫组件

上面的说法可能还是太模糊，具体一点讲就是：用来实现局部（特定）功能效果的代码合集（html/css/js/images/..）

如何使用

组件的类型

组件 (Component) 是 Vue.js 最强大的功能之一，在vue中组件有两种类型：

• 非单文件组件：将组件的模板、脚本和样式分开写在不同的文件中。非单文件组件会使用一些静态文件服务器或者Webpack等工具来将这些文件打包成一个完整的HTML文件，然后通过引入这个HTML文件来使用这个组件。
• 单文件组件：将组件的模板（template）、脚本（script）和样式（style）写在同一个文件中，通常使用.vue作为文件扩展名

在实际开发中，用得最多的是单文件组件，因为它提供了更好的代码组织和维护性。下面就是一个单文件组件的例子

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

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

<style scoped>
h1 {
  color: red;
}
</style>

如何使用组件

现实生活中你想要别人帮你做事，首先你需要知道别人叫什么。使用组件也是如此，如果你不知道组件的名称，即使它存在，你也无法使用它。如何知道组件的名字呢，vue中称为“注册”，必须先对组件进行注册后，才能使用。

注册有全局注册和局部注册两种方式。

• 全局注册：任何vue实例都可以使用

// 创建Vue实例之前注册组件 全局注册
Vue.component('my-component', {
  template: '<div>My Component</div>'
});

// 创建Vue实例
new Vue({
  el: '#app'
});

注册成功后，你可以用该组件进行构建了

<div>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</div>

• 局部注册：在特定的Vue组件内部注册其他组件的方式。通过在组件的components选项中添加组件的定义，注册后的组件只有在该实例作用域下有效。

简单说就是A注册了B组件，则组件B只能在A中使用，无法在C中使用

<template>
  <div>
    <h1>主要组件</h1>
    <HelloWorld></HelloWorld> <!-- 使用注册的局部组件 -->
  </div>
</template>

<script>
import HelloWorld from './HelloWorld.vue' // 导入局部组件

export default {
  name: 'App',
  components: {
    HelloWorld // 注册局部组件
  }
}
</script>

组件跟Vue实例的区别

data必须是一个函数

在上述例子中，你可能会发现它的 data 并不直接提供一个对象，取而代之的是函数。一个组件的 data 选项必须是一个函数，因为这样每个实例可以维护一份被返回对象的独立的拷贝。

data () {
  return {
    count: 0
  }
}

子组件有可能会被调用多次，而每次调用时的data数据都应该是独立的。使用函数可以避免组件被复用时，数据存在引用的关系。这样才不会出现每个子组件数据相互影响的情况。

组件没有el

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

因为最终所有的组件都要经过一个vue实例的管理，由vue实例中的el决定服务哪个容器。

总结

使用组件的三大步骤-

1. 定义组件
2. 注册组件
   1. 局部注册（实际开发中用得更多）
   2. 全局注册
3. 使用组件（写组件标签） < HelloWorld >< /HelloWorld>