Vue2+Vue3基础入门到实战项目（三）——课程学习笔记

 大家好， Capybara 将继续与大家一起学习Vue框架。今天依旧是大家的 编程学习小伙伴、前端学习体验家、网课资源品鉴官。

day04

组件的三大组成部分 (结构/样式/逻辑)

scoped样式冲突

当style标签不加scoped

1.style中的样式 默认是作用到全局的

 2.加上scoped可以让样式变成局部样式

  组件都应该有独立的样式，推荐加scoped（原理）
  -----------------------------------------------------

 scoped原理：

1.给当前组件模板的所有元素，都会添加上一个自定义属性

 data-v-hash值

data-v-5f6a9d56  用于区分开不同的组件

2.css选择器后面，被自动处理，添加上了属性选择器

div[data-v-5f6a9d56]

代码：

data是一个函数

一个组件的 data 选项必须是一个函数。→ 保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

实操代码：

BaseCount.vue

在App.vue中注册使用三个BaseCount：

 效果：

 控制台：

组件通信

什么是组件通信？

 父子组件通信

父传子

实操代码： 

效果：

 子传父

实操代码：

效果：

props详解

什么是 prop

 props 校验

实操

正确传值：

 错误传值（无错误提示）：

类型校验 

添加校验（类型校验）：

 错误提示：

 （类型校验）完整写法：

 非空校验

不给子组件传值：

 错误提示：

 默认值

（没传值的时候按默认值来）：

传个超大值：

// 2.完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },

 自定义校验

value为父组件传入子组件的值；

return ture则通过校验，反之不通过，提示错误；

单向数据流

子组件随意修改自己内部的数据count：

 在子组件中尝试修改父组件传过来的count：

unexpected mutation（意外的改变）

 正确做法（儿子通知老爹，让其修改—— 子传父通信 ）：

在子组件添加事件监听：

 添加事件触发函数，通过 $emit 传信：

 父组件添加监听：

 父组件处理：

单向数据流：父组件的prop更新，会单向地向下流动，影响到子组件（数据更新）。

综合案例：小黑记事本 (组件版)

小黑记事本组件版-拆分组件 

小黑记事本组件版-渲染&添加删除

app.vue中，给子组件传入list

渲染功能

// 1.提供数据： 提供在公共的父组件 App.vue

// 2.通过父传子，将数据传递给TodoMain

// 3.利用 v-for渲染

TodoMain.vue

添加功能

// 1.手机表单数据  v-model

// 2.监听事件（回车+点击都要添加）

// 3.子传父，讲任务名称传递给父组件 App.vue

// 4.进行添加 unshift（自己的数据自己负责）

// 5.清空文本框输入的内容

// 6.对输入的空数据 进行判断

TodoHeader.vue

在app.vue中修改数据

删除功能

// 1.监听事件（监听删除的点击） 携带id

// 2.子传父，讲删除的id传递给父组件的App.vue

// 3.进行删除filter（自己的数据 自己负责）

子组件监听：

 通知父组件：

 父组件修改数据：

底部功能与持久化

// 底部合计：父传子  传list 渲染

// 清空功能：子传父  通知父组件 → 父组件进行更新

// 持久化存储：watch深度监视list的变化 -> 往本地存储 ->进入页面优先读取本地数据

TodoFooter.vue

app.vue代码

总结

非父子通信 (拓展) - event bus 事件总线

 建立两个非父子组件的通信：

 创建 utils/EventBus.js

EventBus.js

import Vue from 'vue'

const Bus  =  new Vue()

export default Bus

 点击B组件中的按钮后，A组件接收到信息并显示：

 可以实现一对多通信：

非父子通信 (拓展) - provide & inject

跨层级共享数据：

 组件结构：

 App.vue中既有简单类型数据，也有复杂类型数据：

简单数据类型（非响应式）

复杂类型（响应式，推荐）

 使用provide提供数据

 注册点击事件：

 点击按钮之后，我们看到数据（简单类型）已经改变（pink->green），但页面并没有响应更新：

修改复杂类型数据：

 页面自动更新（zs -> ls）：

进阶语法

v-model 原理

不同的input组件，比如checkbox就是checked属性和checked事件的合写。

 在模板中不能写e，

 而应写$event（获取事件对象）

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

表单类组件封装

封装自己的表单类组件（BaseSelect）时，

因为单向数据流的存在，而v-model是双向数据绑定，所以需要拆解（不再使用语法糖v-model）

如果在封装表单类组件时（作为子组件使用）使用v-model，

选中其它city，会因为双向绑定，修改子组件中的cityId，

不符合单向数据流（cityId由父组件传入）

 

完整代码

BaseSelect.vue

App.vue

（在父组件中，使用 $event 获取形参）

Vue中的$event详解

场景1：获取原生DOM事件的事件对象
在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象

当我们点击button按钮时，可以看到控制台打印出的事件对象，如下图：

通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码。

场景2：事件注册所传的参数(子组件向父组件传值)
在子组件中通过$emit注册事件，将数据作为参数传入，在父组件中通过$event接收

父组件：

子组件：

此时我们点击hello按钮，就会将子组件传入的'hello'字符串在页面上显示出来，如下图

v-model 简化代码

关键：

父子通信时，子组件触发事件名为‘input’的事件（触发事件为input，固定的）；

在父组件使用v-mdel语法糖：:value=" " @input=" "  （所传属性为value，固定的）

总结

.sync 修饰符

代码：

BaseDialog.vue

App.vue

ref 和 $refs

获取dom元素

代码：

BaseChart.vue

App.vue

效果：

document.querySelector 会查找项目中所有的元素；

$refs只会在当前组件查找盒子。

获取组件实例

效果（点击获取数据）：

Vue异步更新和$nextTick

 

模板：

 this.$refs.inp为undefined 

使用$nextTick改进代码：

 使用setTimeOut也可以解决问题（但，等待时间不精准）：

 $nextTick：等 DOM 更新后, 才会触发执行此方法里的函数体

 本次Vue学习系列（三）结束，

欢迎大家在评论区留言、讨论。