组件的样式冲突 scoped
默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
1. 全局样式: 默认组件中的样式会作用到全局
2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件
原理：当前组件内标签都被添加 data-v-hash值 的属性，css选择器都被添加 [data-v-hash值] 的属性选择器
data
一个组件的 data 选项必须是一个函数。
保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。
组件通信
组件通信, 就是指 组件与组件 之间的数据传递。
父子关系
父组件通过 props 将数据传递给子组件，子组件利用 $emit 通知父组件修改更新
props
组件上注册的一些自定义属性，向子组件传递数据，可以传递任意数量的prop
校验：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示
prop & data单向数据流
非父子关系
event bus 事件总线
provide & inject
v-model 原理
v-model本质上是一个语法糖，提供数据的双向绑定 。
例如应用在输入框上，就是 value属性 和 input事件 的合写
表单类组件封装
实现子组件和父组件数据的双向绑定
父传子：数据 应该是父组件 props 传递 过来的，拆解 v-model 绑定数据
子传父：监听输入，子传父传值给父组件修改
v-model 简化代码
父组件 v-model 简化代码
子组件中：props 通过 value 接收，事件触发 input
父组件中：v-model 给组件直接绑数据
.sync 修饰符
同样可以实现子组件与父组件数据的双向绑定
prop属性名，可以自定义，非固定为 value
本质就是 :属性名 和 @update:属性名合写
ref 和 $refs
利用 ref 和 $refs 可以用于获取 dom 元素, 或组件实例
获取 dom 元素
与document.querySelect不同的是ref只在当前组件中查找
获取组件
$nextTick
Vue是异步更新的
$nextTick：等DOM更新后, 才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
