vue3学习（组件基础）

组件基础

单文件组件

Vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式。它允许将Vue组件的模板（可理解为HTML）、逻辑(可理解为js)与样式(可理解为css)封装在单个文件中。

 

1.一个单文件组件必须要有<template>，可以没有script和style。

2.在逻辑中有基础模板，要导出一个对象（这个操作为export default），js所有的业务都在export default中,里面包含组件的内容。首先需要对这个组件进行命名。所以要有name:” ”。

3.若<style>中加入scoped属性即<style scoped>，就代表着当前样式只在当前组件中生效。

加载组件

第一步：引入组件 import component1 from './components/component1.vue';

第二步：挂载组件components: {component1}

第三步：显示组件<component1 />

组件的组织

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

 

这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。（简单来说就是vue组件不停的套娃，可以一直套）。优点是组件之间修改互不影响。

如有问题或错误之处，欢迎讨论和批评指正！