前言

组件作为 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 实例。