一、组件化开发
组件化开发指的是根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。
二、Vue 组件的组成
template：组件的模板结构script：组件的 JavaScript 行为style：组件的样式
<template>
<div class="test-box">
<h3>用户自定义Test.vue --- {{ username }}</h3>
</div>
</template>
// 使用 less 语法
<style lang="less">
.test-box {
background-color: pink;
h3 {
color: cyan;
}
}
</style>
<script>
export default {
// 注意： .vue 文件中的 data 不能指向对象
data() {
// return 出去的对象可以定义数据
return {
username: "Jack",
};
},
};
</script>
三、组件之间的关系
四、使用 Vue 的三个步骤
使用 components 节点注册的组件为私有子组件，若某个组件在其他组件中需要频繁使用，可以在 main.js文件中使用 Vue.component 注册为全局组件，则在其他组件中无需重复导入该组件便可直接使用。
import Count from '@/components/Count.vue'
Vue.component('Count',Count)
五、组件的 props 属性
props 是组件的自定义属性，在封装通用组件的时候，合理的使用 props 可以极大的提高组件的复用性！
<script>
export default {
// props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
// 自定义属性的名字，是封装者自定义的（只要名称合法即可）
// props 中的数据，可以直接在模板结构中被使用
// 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！
// props: ['init'],
props: {
// 自定义属性A : { /* 配置选项 */ },
// 自定义属性B : { /* 配置选项 */ },
// 自定义属性C : { /* 配置选项 */ },
init: {
// 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
default: 0,
// init 的值类型必须是 Number 数字
type: Number,
// 必填项校验
required: true
}
},
data() {
return {
// 把 props 中的 init 值，转存到 count 上
count: this.init
}
},
methods: {
show() {
console.log(this)
}
}
}
</script><Count :init="9"></Count>
六、组件之间的样式冲突间隔
默认情况下，写在 .vue 组件中的样式会全局生效，因此容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是：
单页面应用程序中，所有组件的 DOM 结构都是基于唯一的 index.html 页面进行呈现的
每个组件中的样式都会影响整个 index.html 页面中的 DOM 元素
<style lang="less" scoped></style>加上 scoped 属性即可解决样式冲突问题！
添加 scoped 属性会为该组件所有标签添加一个 data-v-xxx 属性，例如：h5[data-v-3c83f0b7]
/deep/ 样式穿透：
<!-- 当使用第三方组件库的时候，如果有修改第三方组件默认样式的需求，需要用到 /deep/ -->
/deep/ h5 {
color: pink;
}添加 /deep/ 属性会为该组件所有标签添加一个 data-v-xxx 属性，例如：[data-v-3c83f0b7] h5
一 叶 知 秋，奥 妙 玄 心
