【vue3入门】-【18】组件组成

组件组成

组件最大的优势就是可复用性

当使用构建步骤是，我们一般将vue组件定义在一个单独的.vue文件中，这杯叫做单文件组件（简称SFC）

• 组件组成结构

<!--承载所有的html标签,组件中必须要有的部分-->
<template>
	<div>承载标签</div>
</template>
<!--承载所有的业务逻辑，组件中可选存在的部分-->
<script>
export default{}
</script>
<!--承载所有的样式，组件中可选存在的部分-->
<!--scoped：让当前样式只在当前组件中生效，建议总是在组件中添加，避免全局生效-->
<style scoped>
</style>

• 组件引用

<template>
  <!--第三步：显示组件-->
  <mycomponent />
</template>
<script>
// 第一步：引入组件
import mycomponent from './components/mycomponent.vue'

export default {
  // 第二步：注入组件
  components: {
    mycomponent
  }
}
</script>
<style></style>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9