这是我参与「第四届青训营 」笔记创作活动的第7天
什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成，分别是：
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。
template
vue 规定：每个组件对应的模板结构，需要定义到 <template> 节点中。
<template>
<!-- 当前组件的 DOM 结构 -->
<div>
</div>
</template>
注意：
- template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
- template 中只能包含唯一的根节点
script
vue 规定：开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。<script> 节点的基本结构如下：
<script>
// 今后，组件相关的 data 数据、methods方法等，
// 都需要定义到export default所导出的对象中。
export default{
data() {
return {
name: 'zs'
}
},
methods: {
}
}
</script>
vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。
style
vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。
在 <style> 标签上添加 lang="less" 属性，即可使用 less 语法编写组件的样式：
<style lang="less">
h1 {
font-weight: normal;
span {
color: red;
}
}
</style>
组件之间的父子关系
组件在被封装好之后，彼此之间是相互独立的，不存在父子关系
在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系
使用组件的三个步骤
步骤1：使用 import 语法导入需要的组件
import Left from '@/components/Left.vue'
步骤2：使用 components 节点注册组件/导入需要全局注册的组件 import Count from '@/components/Count.vue' l/参数1:字符串格式，表示组件的"注册名称” 1/参数2:需要被全局注册的那个组件 vue.component( ' MyCount' , Count)
export defalut {
// 通过 components 注册的是私有子组件
// 不能在其他组件中使用
components: {
Left
}
}
步骤3：以标签形式使用刚才注册的组件
<div>
<Left></Left>
</div>
注册全局组件
在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：
//导入需要全局注册的组件
import Count from '@/components/Count.vue'
// 参数1: 字符串格式，表示组件的"注册名称"
// 参数2: 需要被全局注册的那个组件
Vue.component('MyCount' , Count)
组件的 props
props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
它的语法格式如下：
export default {
// 组件的自定义属性
props:['自定义属性A', '自定义属性B', '其它自定义属性... '],
// 组件的私有数据
data() {
return { }
}
}
props 是只读的
vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错。
要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！
props: [ 'init'],
data() {
return {
count: this.init // 把 this.init 的值转存到 count
}
}
props 的 default 默认值
在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：
export default {
props: {
init: {
//用 default 属性定义属性的默认值
default: 0
}
}
}
props 的 type 值类型
在声明自定义属性时，可以通过 type 来定义属性的值类型。类型不匹配会报错。示例代码如下：
export default {
props : {
init: {
// 用 default 属性定义属性的默认值
default: 0，
// 用 type 属性定义属性的值类型，
// 如果传递过来的值不符合此类型，则会在终端报错
type: Number
}
}
}
props 的 required 必填项
在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代码如下：
export default {
props: {
init: {
// 值类型为 Number 数字
type: Number ,
// 必填项校验
required: true
}
}
}
组件之间的样式冲突问题
默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
- 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的
index.html页面进行呈现的 - 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素
如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下：
<template>
<div class="container" data-v-001>
<h3 data-v-001>轮播图组件</h3>
</div>
</template>
<style>
/* 通过中括号"属性选择器"，来防止组件之间的"样式冲突问题"，
因为每个组件分配的自定义属性是"唯一的" */
.container[data-v-0001] {
border: 1px solid red;
}
</style>
style 节点的 scoped 属性
为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：
<template>
<div class="container">
<h3>轮播图组件</h3>
</div>
</template>
<style scoped>
/* style 节点的 scoped 属性，用来自动为每个组件分配唯一的”自定义属性"，
并自动为当前组件的 DOM 标签和 style 样式应用这个自定义属性，防止组件的样式冲突问题。
作用同上 */
.container {
border: 1px solid red;
}
</style>
/deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度选择器。
<style lang="less" scoped>
.title {
color: blue; /* 不加 /deep/ 时，生成的选择器格式为 .title[data-v-052242de] */
}
/deep/ .title {
color: blue; /* 加上 /deep/ 时，生成的选择器格式为 [data-v-052242de] .title */
}
</style>
