Vue学习记录（四）

wiedereshen
102 阅读4分钟

组件的样式冲突--scoped

  • 默认情况：
    • 写在组件中的样式会全局生效 -> 容易造成多个组件之间的样式冲突问题
    1. 全局样式：默认组件中的样式会作用的全局
    2. 局部样式：给组件加上 scoped 属性，可以让样式仅作用于当前组件
  • scopped 原理
    1. 当前组件内标签都被加上 data-v-hash值 的属性
    2. css选择器都被添加【data-v-hash值】 的属性选择器

data 必须写为一个函数

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

组件之间的通信

  • QQ20241101-105523.png
  • 父子通信流程
    • 父传子
      1. 在父中添加属性给子传值
      2. 子使用 props 接受
      3. 使用
      • QQ20241101-112821.png
    • 子传父
      1. 子 ￥emit 发送消息
      2. 父给子中添加消息监听
      3. 父中实现处理函数
      • QQ20241101-112929.png

什么是prop

  • 定义：组件上注册的一些自定义属性
  • 作用：向子组件传递数据
  • 特点：
    1. 可以传递任意数量的prop
    2. 可以传递任意类型的prop

props 校验

  • 组件的 prop 不可以乱传（类型）
  • 作用：为组件的 prop 指定验证要求
  • 语法：
    1. 类型校验
    2. QQ20241101-115429.png
    3. 非空校验
    4. 默认值
    5. 自定义校验
    6. QQ20241101-121509.png
    7. QQ20241101-121617.png

prop & data 和 单向数据流

  • prop & data
    • 共同点：给组件提供数据
    • 不同点：
      1. data 数据是自己的 --> 随便改
      2. prop 数据是外部的 --> 不能直接改，要遵循单向数据流
  • 单向数据流：
    • 父级 prop 的数据更新，向下流动，影响子组件。这个数据的流动是单向的
    • QQ20241101-122745.png

组件通信案例：小黑记事本 -- 组件版

  • 拆分组件
    • 将 App.vue 中的 header、main、footer 拆分为三个组件
  • 渲染功能
    1. 提供数据 --> 提供在公共的父组件 APP.vue 中
      • QQ20241102-112727.png
    2. 通过父传子，将数据传递给 ToDoMain.vue 子组件中
      • QQ20241102-112844.png
    3. 在子组件中接收，并利用 v-for 进行渲染
      • QQ20241102-112756.png
  • 添加功能
    1. v-model 实现收集表单数据
      • QQ20241102-115142.png
    2. 监听事件（回车 + 点击）
      • QQ20241102-115215.png
    3. 子传父，将任务名称传递给父组件 App.vue
      • QQ20241102-115253.png
    4. 添加数据到父组件中的 data (使用 unshift 方法)
      • QQ20241102-115336.png
  • 删除功能
    1. 监听点击事件，携带id
    2. 子传父，将需要删除的id传递给父组件
      • QQ20241102-122518.png
    3. 在父组件中使用 filter 进行删除
      • QQ20241102-122633.png
  • 底部合计
    1. 父传子 list 双括号渲染
      • QQ20241102-213305.png
  • 清空全部
    1. 子传父，父组件负责清空
      • QQ20241102-213739.png
      • QQ20241102-213521.png

非父子通信 -- event bus 事件总线

  • 作用：
  • 非父子组件之间，进行简易消息传递 （复杂场景使用 VueX）
  1. 创建一个都能访问到的事件总线（空 Vue 实例） ->
  • QQ20241102-215909.png
  1. A组件（接收方），监听 Bus 实例的事件
  • QQ20241102-215917.png
  1. B组件（发送方），触发 Bus 实例的事件
  • QQ20241102-215924.png

跨层级共享数据 -- provide & inject

  1. 父组件 provide 提供数据
    • QQ20241102-221132.png
  2. 子 / 孙 inject 取值使用
    • QQ20241102-221145.png

v-model 原理

  • 原理
    • v-model 本质上是一个语法糖（是语法的简写），例如应用在输入框上，就是 value属性和 input事件的合写
  • 作用：
    • 提供数据的双向绑定
      1. 数据发生改变，页面会自动变 :value
      2. 页面输入改变，数据会自动变 @input
  • 注意：￥event 用于在模板中获取事件的形参

封装表单类组件 & v-model简化代码

  • 表单类组件的封装
    1. 父传子：数据由父组件传递过来，使用 props 接收，拆解 v-model 绑定数据
      • 注意：在子组件中不可以使用 v-model 直接绑定 props 接收的数据
    2. 子传父：监听输入，子组件传值给父组件进行修改
      • QQ20241103-130650.png
  • v-model 简化代码
    1. 子组件中：props 通过 value 接收，事件触发 input
    2. 父组件中：v-model 给组件直接绑定数据
    3. QQ20241103-155957.png

.sync 修饰符

  • 作用：
    • 实现 子组件 与 父组件 的双向绑定
  • 特点：
    • prop属性名，可以自定义，不固定为 value
  • 场景：
    • 封装弹框类基础组件，visible属性（true显示，false隐藏）
  • 原理：
    • 是 :属性名 和 @update:属性名 的合写
  • QQ20241103-154550.png

ref 和 ￥refs

  • 作用：
  • 利用 ref 和 ￥refs 可以用于获取 dom 元素，或 组件实例
  • 特点
  • 查找范围 -> 当前组件内（更精确，更稳定）
  • QQ20241103-162128.png
  • 获取组件实例
    • QQ20241103-164334.png

Vue异步更新、￥nextTick

  • 需求： 编辑标题，编辑框自动聚焦

    1. 点击编辑，显示编辑框
    2. 编辑框立刻获取焦点

  • 问题：“显示之后”，立刻获取焦点是不成功的

    • 原因：Vue 是异步更新 DOM

  • QQ20241103-165647.png

  • QQ20241103-170514.png

avatar
文章
阅读
粉丝