vue2+vue3基础

组件的三大组成部分

结构 template 在vue2中只能有一个根元素

样式 style 全局样式(默认)影响所有组件，局部样式：scoped下样式，只作用于当前组件

逻辑 script el根实例独有，data是一个函数，其他配置项一致

组件的样式冲突 scoped

 默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
1. 全局样式: 默认组件中的样式会作用到全局
2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件

scoped原理？
1. 当前组件内标签都被添加 data-v-hash值 的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

 

data是一个函数

 一个组件的 data 选项必须是一个函数。→ 保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

组件通信 

 什么是组件通信

 

不同组件关系和组件通信方案分类

 

 组件通信解决方案

 

父子组件通信流程图 

 

 父子通信方案的核心流程
2.1 父传子props：
① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用
2.2 子传父$emit：
① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

 什么是prop

 prop定义：组件上注册的一些自定义属性

prop作用：向子组件传递数据

特点：可以传递任意数量的prop

可以传递任意类型的prop

props校验

思考：组件的 prop 可以乱传么？
作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误
语法：
① 类型校验
② 非空校验
③ 默认值
④ 自定义校验

props: {
校验的属性名: {
type: 类型, // Number String Boolean ...
required: true, // 是否必填
default: 默认值, // 默认值
validator (value) {
// 自定义校验逻辑
return 是否通过校验
}
}
},

prop和data的相同点和不同点

共同点：都可以给组件提供数据。
区别：
⚫ data 的数据是自己的 → 随便改
⚫ prop 的数据是外部的 → 不能直接改，要遵循 单向数据流
单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。