目录
一、什么是组件化开发？
组件化开发指的是：利用封装，把页面上可以复用的ui结构封装成为组件，以便于项目的维护和开发
vue是一个支持组件化开发的前端框架。
同时vue中规定以 .vue 结尾的文件就是一个组件
二、Vue组件的三个组成部分
1. template：组件的模板结构
2. script： 组件的JavaScript行为
3. style：组件的样式
<template>
<div class="box" @click="changeName">这里是组件的模板结构---{ { username }}</div>
</template>
<script>
// 默认导出，这是固定写法
export default {
// data 数据源
// 注意： .vue 组件中的 data不能 像之前一样，不能指向对象
// 注意：组件中的data 必须是一个函数
data() {
// 这个return 出去的 对象 {} 中，可以定义数据
return {
username: '刘朋'
}
},
methods: {
changeName() {
//在组件中， this就表示当前组件的实例对象
console.log(this);
this.username = '李永丽'
}
},
// 当前组件中的侦听器
watch: {},
// 当前组件中的计算属性
computed: {},
// 当前组件中的过滤器
filters:{}
}
</script>
<style lang="less" scoped>
.box {
font-size: 18px;
color: red;
}
</style>
三、组件之间的父子关系？
组件在被封装好后是独立的，不存在父子关系
组件在使用的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系
四、组件的使用
1. 使用 import 导入需要 使用的组件
例：import Left from '@/compnents/Left.vue'
2. 使用export default 里面的 components 方法来注册组件
例：export default {
components: {
Left
}
}
3. 以标签的形式使用组件
<template>
<div>
<Left></Left>
</div>
</template>
四、全局组件
有时候一些组件会被重复的使用，这时候可以把它注册为全局组件，这样在使用的时候就不用每一次都要导入和注册了，只需要再 main.js 入口文件中导入注册一次就可以了
全局组件的使用：
main.js 文件中，通过Vue.component() 方法注册全局组件
import Left from '@/compnents/Left.vue'
Vue.component('Left.name', Left)
Vue.component()，里面有两个参数，第一个参数是字符串格式，注册组件的名字，第二个参数是需要被注册的那个组件
五、组件的props属性
props是组件的 自定义属性，在封装通用组件的时候，合理使用可以极大的提高组件的复用性！但是要注意以下几点：
-
props中的数据，可以直接在模版结构中使用
-
vue规定，组件中封装的props是只读的，程序员不能直接修改props的值，否则会报错
-
要想修改props的值，可以把props的值转存到data中。
1. props自定义属性有两种写法：
1）数组格式的props：缺点是只能接收数据，但是无法给定默认值
export default {
// props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
// props中的数据，可以直接在模版结构中被使用
// 注意:props 是只读的，不要修改props的值，否则会报错
props: ['init'],
data() {
return {
// 虽然无法修改，但是可以把接收到的值，赋值给count
count: this.init
}
},
methods: {
add() {
this.count+=1
}
}
}
2）对象格式的props
对象格式的props有以下几种参数
- default：默认值是0
- type：值类型
- required：必填项校验
export default {
// props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
// props中的数据，可以直接在模版结构中被使用
// 注意:props 是只读的，不要修改props的值，否则会报错
props: {
// 自定义属性1:{配置选项}
// 自定义属性2:{配置选项}
// 自定义属性3:{配置选项}
init: {
// 如果使用者，没有传递init属性，则默认值为default：0
default: 0,
// 规定init的值类型，必须为数字
type: Number,
// 必填项校验，如果使用者没有使用init这个属性，则会报错
required: true
}
},
data() {
return {
// 虽然无法修改，但是可以把接受到的值，赋值给count
count: this.init
}
},
methods: {
add() {
this.count+=1
}
}
}
六、组件之间样式冲突问题
默认情况下，写在 .vue 组件中的样式会 全局生效，因此会造成多个组件之间的样式冲突问题
冲突的根本原因：
单页面应用中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
每个组件中的样式，都会影响整个index.html页面中的DOM元素
解决办法：添加 scoped
<style lang="less" scoped>
</style>
当使用第三方组件库的时候，如果有修改第三方组件的默认样式，需要用到 /deep/
/deep/ h5 {
color: blue;
}