前言

组件作为vue中一个极为重要的功能，在我们平常的业务开发中占据着不可或缺的作用。灵活的运用组件化开发，可以极大减轻重复代码的编写，对于一些可重用的部分，可以进行高效的复用。而对于业务的处理上，组件化更能清晰的区分每个组件负责的功能，使得业务的展示更加明了。而要更好的掌握组件化开发，基础的掌握尤为重要，并且组件化的思维，更能让我们在不止是vue框架，在运用其他框架开发中也能受益良多。下面就要我们从基础一点点开始吧！正所谓“万丈高楼平地起，一砖一瓦皆根基”便是这个道理。

组件的定义

vue组件的定义有两种方式：

• 一种是通过 .vue 文件的形式来声明。也就是单文件组件(简称 SFC)。

<script setup> 
import { ref } from 'vue' 
const num = ref(0) 
</script> 
<template> 
    <button @click="num++">点前数值：{{ num }} 。</button> 
</template>
复制代码

• 另一种是通过 .js 文件点的形式来声明。

import { ref } from 'vue'
export default {
  setup() {
    const num = ref(0)
    return { num }
  },
  template: `
    <button @click="num++">
      点前数值：{{ num }} 。
    </button>`
}
复制代码

组件的使用

vue3中对于组件的使用，提供了一种<script setup>的模式。在父组件使用相应的子组件时，只需要对其进行相应的导入，就可以在模板中使用了。

<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>
<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>
复制代码

当然你也可以使用全局组件的形式，不过有利有弊，有兴趣的话，可以自行了解了解，这里不在过多赘述。

还有很关键的一点是，每一个组件都维护着自己内部的状态，组件内部的数据都是相互独立的，也就是说每个组件都是一个vue实例。