目录
一、什么是组件化开发?
组件化开发指的是:利用封装,把页面上可以复用的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;
}