Vue2——4

组件的样式冲突 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(函数体)