什么是组件开发
组件就是可复用的vue实例,封装标签,样式,和代码
.vue组件分类：
- 页面组件
- 页面下的功能组件
组件化开发 ：一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能
- 封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护
一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构（template） 样式(style) 和 行为(script) (html, css和js)
vue组件-封装使用
目标
掌握组件封装使用的基本步骤
为啥要封装组件
- 复用。一次封装，多次使用
- 代码整理，方便维护。
步骤
- 定义组件
- 注册组件
- 使用组件
- 创建组件： MyCom.vue
- 引入并注册组件
// 局部注册组件
// 进入到当前组件内部
// 1. 导入组件
import 组件名 from './组件文件.vue'
// 2. 局部注册
export default {
components: {
组件名: 组件名
}
}
- 使用组件。在当前页面中，当做标签来使用。
注意：
组件名不能与现有的html标签名一致。
小结
- 每一个组件都是封闭的。它有自己的template, script，style
- 组件之间可以相互引用使用。
vue组件-用scoped实现组件的私有样式
目标
解决多个组件样式名相同, 冲突问题
问题说明
默认组件style 中定义的样式是全局=》存在相同名字覆盖的情况
如何解决
在标签里加上scoped,如下:
原理
● 在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
● 而且必须是当前组件的元素或者子组件的根元素, 才会有这个自定义属性
vue组件-/deep/深度作用选择符
问题导入
当父子组件都使用了scoped的情况下，如何在父组件中控制子组件的样式？
解决方案
父组件的选择器 /deep/ .子组件的选择器 父组件：
<template>
<div class="box">
<h1 class="red">父组件</h1>
<hr />
+ <Child />
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
components: {
Child,
},
}
</script>
<style scoped>
.red {
color: blue;
}
+ .box /deep/ h2 {
+ color: lawngreen;
+ }
</style>
子组件：
<template>
<div>
<h2>子组件</h2>
<p class="red">
<span>123</span>
</p>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
.red {
color: red;
}
</style>
