vue3-组件基础

什么是组件

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行处理。在实际应用中，组件常常被组织成层层嵌套的树状结构。

定义一个组件

我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

import { ref } from 'vue'

const count = ref(0)





.container {
}

效果：

使用组件

要使用一个子组件，我们需要在父组件中导入它。

组件可以被重用任意多次

import { ref } from 'vue'
import ButtonCount from '@/components/ButtonCount.vue'





.container {
}

效果：

• 每当你使用一个组件，就创建了一个新的实例

• 在单文件组件中，推荐为子组件使用 PascalCase 的标签名，以此来和原生的 HTML 元素作区分。

 或者

• 如果你是直接在 DOM 中书写模板 (例如原生