1.组件的使用步骤
1.1创建组件
通过一个普通的 JavaScript 对象来定义组件。注意与创建App的差异，配置项中不能出现data: 和 el：选项，传递数据时使用 data( ){ } 函数。
const ComponentA = {
data() {
return { count: 1 }
},
methods: {
increment() {
this.count++
}
}
}
1.2注册组件
1.2.1全局注册
注册组件时使用component函数，总共有两个参数，第一个参数是该组件名称，第二个参数是组件对象（1.1中创建的ComponentA ）。
const app = Vue.createApp({...})
app.component('my-component-name', MyComponent)
除了先创建再注册这种方式外，更简洁的方法是注册时创建。在component第二个参数处写入组件对象。
const app = Vue.createApp({...})
app.component('my-component-name', {
data() {
return { count: 1 }
},
methods: {
increment() {
this.count++
}
})
注意：
当直接在 DOM 中 使用一个组件的时候，强烈推荐遵循 W3C 规范来给自定义标签命名：
- 全部小写
- 包含连字符 (及：即有多个单词与连字符符号连接)，如：my-component-name
1.2.2局部注册
在App的 components 选项中定义你想要使用的组件：
const app = Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
1.3使用组件标签
经过注册后的组件，能够以标签的形式直接使用组件名==标签名
<body>
<div>
<ComponentA></ComponentA>
</div>
</body>
1.4局部注册与全局注册
全局注册
全局注册的组件，在注册之后可以用在任何新创建的组件实例的模板中。比如：注册3个组件
const app = Vue.createApp({})
app.component('component-a', {
})
app.component('component-b', {
})
app.component('component-c', {
})
app.mount('#app')
在id='app’的容器中使用
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
更重要的是在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
局部注册
局部注册的组件在其子组件中不可用。例如，如果你希望ComponentA在 ComponentB 中可用，则你需要这样写 ：
const ComponentA = {
}
const ComponentB = {
components: {
'component-a': ComponentA
}
}
或者在ComponentB文件中导入ComponentA组件：
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
}
}
2.单文件组件
2.1单文件组件的结构
Vue SFC 是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成：<template>、<script> 与 <style>：
<script> 部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。<template> 部分定义了组件的模板。<style> 部分定义了与此组件关联的 CSS。
<script>
export default {
data() {
return {
greeting: 'Hello World!'
}
}
}
</script>
<template>
<p class="greeting">{{ greeting }}</p>
</template>
<style>
.greeting {
color: red;
font-weight: bold;
}
</style>
2.2使用
Vue SFC 是框架指定的文件格式，必须由 @vue/compiler-sfc 预编译为标准的 JavaScript 与 CSS。在实际项目中，通常会将 SFC 编译器与 Vite 或 Vue CLI（基于 webpack）等构建工具集成在一起，Vue 提供的官方脚手架工具，可让你更快地开始使用 SFC。
编译后的 SFC 是一个标准的 JavaScript（ES）模块——这意味着通过正确的构建配置，可以像模块一样导入 SFC：
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
}
}
2.3单文件组件的优点
- 使用熟悉的 HTML、CSS 与 JavaScript 语法编写模块化组件
- 预编译模板
- 组件作用域 CSS
- 使用 Composition API 时更符合人体工程学的语法
- 通过交叉分析模板与脚本进行更多编译时优化
- IDE 支持 模板表达式的自动补全与类型检查
- 开箱即用的热模块更换（HMR）支持
以下场景中推荐使用Vue
- 单页应用（SPA）
- 静态站点生成（SSG）
- 任何重要的前端，其中构建步骤可以得到更好的开发体验（DX）。
|