day04vue学习

day04

一、学习目标

1.组件的三大组成部分（结构/样式/逻辑）

scoped解决样式冲突/data是一个函数

2.组件通信

组件通信语法
父传子
子传父
非父子通信（扩展）

3.综合案例：小黑记事本（组件版）

拆分组件
列表渲染
数据添加
数据删除
列表统计
清空
持久化

4.进阶语法

v-model原理
v-model应用于组件
sync修饰符
ref和$refs
$nextTick

二、scoped解决样式冲突

1.默认情况：

写在组件中的样式 style 会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

2.代码演示

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script>
<style>div {border: 3px solid blue;margin: 30px;}// 默认的style样式，会做用到全局// 由于没加scoped，是全局的样式，根组件 App，普通组件 BaseOne 和 BaseTwo 中的 div 都会收到影响
</style>

BaseTwo.vue

<template><div class="base-one">BaseTwo</div>
</template><script>
export default {}
</script><style scoped>// 加了 scoped 是局部作用</style>

scoped 原理：

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

data-v-hash值同一个组件的 hash 值是一样的比如：data-v-5f6a9d56 ，区分开不同的组件
实际在heml页面中的效果是： css 选择器后面，被自动处理,添加上了属性选择器 div[data-v-5f6a9d56]
在 vue 文件中写的每一个style样式，在html页面中都变成了类似上面的属性选择器

App.vue

<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

3.scoped原理

当前组件内标签都被添加data-v-hash值 的属性
css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

在这里插入图片描述

4.总结

style的默认样式是作用到哪里的？
scoped的作用是什么？
style中推不推荐加scoped？

三、data必须是一个函数

1、data为什么要写成函数

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

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

根组件的 data 是一个data对象，而以前不用vue脚手架中写的vue中的对象的data也是一个data对象。

可能是组件中的组件的data必须是一个data函数？不清楚，以后再研究。

在这里插入图片描述

2.代码演示

BaseCount.vue

<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div>
</template><script>
export default {data: function () {return {count: 100,}},
}
</script><style>
.base-count {margin: 20px;
}
</style>

App.vue

<template><div class="app"><BaseCount></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount'
export default {components: {BaseCount,},
}
</script><style>
</style>

3.总结

data写成函数并返回一个对象的目的是什么？

目的：保证每个组件实例，维护独立的一份数据对象。

解释：为了每一次在使用这个组件时，组件之间的data数据是相互独立的。如果不写成函数并返回一个对象，而是直接写成一个对象，到时候重复使用这个组件时会使用同一个data对象中的数据。而且如果不写成data函数，会直接报错。

四、组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

2.组件之间如何通信

在这里插入图片描述

思考：

组件之间有哪些关系？
对应的组件通信方案有哪几类？

3.组件关系分类

父子关系
非父子关系

在这里插入图片描述

不知道，爷孙关系是怎么样的，比如:组件C中有一个组件D，组件A和组件D之间是爷孙关系，组件B和组件D是非父子关系。以后实验一下。

4.通信解决方案

在这里插入图片描述

5.父子通信流程

父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新

在这里插入图片描述

6.父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件 <!-- 2. 父组件对消息进行监听 --><Son :title="myTitle" @changeTitle="changeFn"></Son></div>
</template><script>
import Son from './components/Son.vue'
export default {name: 'App',data() {return {myTitle: '学前端，就来黑马程序员',}},methods: {// 3. 提供处理函数，提供逻辑changeFn (newTitle) {this.myTitle = newTitle;}}components: {Son,},
}
</script><style>
</style>

子组件Son.vue

<template><div class="son" style="border:3px solid #000;margin:10px">我是Son组件 {{ title }}<button @click="handleClick">修改title</button></div>
</template><script>
export default {name: 'Son-Child',props: ['title'], // 这里的属性名必须要根传值时的属性名相同methods: {handleClick () {// 1. 子组件是无法直接通知父组件的，可以用 $emit 触发事件，给父组件发出消息通知this.$emit('changeTitle', '消息改变了');}}
}
</script><style></style>

在这里插入图片描述

父向子传值步骤

给子组件以添加属性的方式传值
子组件内部通过props接收
模板中直接使用 props接收的值
props其实就是给组件添加的一个一个自定义标签属性，像 img 中的 src 属性，通过这种方式来给子组件传值。

7.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

在这里插入图片描述

子向父传值步骤

$emit触发事件，给父组件发送消息通知
父组件监听$emit触发的事件
提供处理函数，在函数的性参中获取传过来的参数

8.总结

组件关系分类有哪两种
父子组件通信的流程是什么？
1. 父向子
2. 子向父

五、什么是props

1.Props 定义

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

2.Props 作用

向子组件传递数据

3.特点

可以传递 任意数量 的prop
可以传递 任意类型 的prop

在这里插入图片描述

4.代码演示

父组件App.vue

<template><div class="app"><UserInfo:username="username":age="age":isSingle="isSingle":car="car":hobby="hobby"></UserInfo></div>
</template><script>
import UserInfo from './components/UserInfo.vue'
export default {data() {return {username: '小帅',age: 28,isSingle: true,car: {brand: '宝马',},hobby: ['篮球', '足球', '羽毛球'],}},components: {UserInfo,},
}
</script><style>
</style>

子组件UserInfo.vue

<template><div class="userinfo"><h3>我是个人信息组件</h3><div>姓名：{{ username }}</div><div>年龄：{{ age }}</div><div>是否单身：{{ isSingle? 是 : 否 }}</div><div>座驾：{{ car.brand }}</div><div>兴趣爱好：{{ hobby.join(',')}}</div></div>
</template>:username="username":age="age":isSingle="isSingle":car="car":hobby="hobby"
<script>
export default {props: ['username','age','isSingle','car','hobby'];
}
</script><style>
.userinfo {width: 300px;border: 3px solid #000;padding: 20px;
}
.userinfo > div {margin: 20px 10px;
}
</style>

六、props校验

1.思考

组件的props可以乱传吗

2.作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

3.语法

类型校验
非空校验
默认值
自定义校验

在这里插入图片描述

4.代码演示

App.vue

<template><div class="app"><BaseProgress :w="width"></BaseProgress></div>
</template><script>
import BaseProgress from './components/BaseProgress.vue'
export default {data() {return {width: 30,}},components: {BaseProgress,},
}
</script><style>
</style>

BaseProgress.vue

<template><div class="base-progress"><div class="inner" :style="{ width: w + '%' }"><span>{{ w }}%</span></div></div>
</template><script>
export default {// 将数组的写法改成对象的写法// 可接受的类型 Number String Boolean Array Object Function 等props: {w: Number},
}
</script><style scoped>
.base-progress {height: 26px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;
}
.inner {position: relative;background: #379bff;border-radius: 15px;height: 25px;box-sizing: border-box;left: -3px;top: -2px;
}
.inner span {position: absolute;right: 0;top: 26px;
}
</style>

七、props校验完整写法

1.语法

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

2.代码实例

<script>
export default {// 完整写法（类型、默认值、非空、自定义校验）props: {w: {type: Number,// required: true, default: 0, // 注意：required 和 default 不能同时存在validator(val) { // 这里的形参是可以拿到传过来的值的// console.log(val)if (val >= 100 || val <= 0) {return true} else {console.error('传入的范围必须是0-100之间')return false}},},},
}
</script>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

八、props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

data 的数据是自己的 → 随便改
prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

4.代码演示

App.vue

<template><div class="app"><BaseCount @changeCount="handleChange" :count="count"></BaseCount></div>
</template><script>
import BaseCount from './components/BaseCount.vue'
export default {components:{BaseCount},data(){return {count: 666}},methods: {handleChange (newValue) {this.count = newVlaue;}}
}
</script><style></style>

BaseCount.vue

<template><div class="base-count"><button @click="handleAdd">-</button><span>{{ count }}</span><button @click="handleSub">+</button></div>
</template><script>
export default {// 1.自己的数据随便修改  （谁的数据 谁负责）//data () {//   return {//     count: 100,//   }//},// 2.外部传过来的数据 不能随便修改props: {count: {type: Number,}, },methods: {handleAdd () {// 子传父 this.$emit(事件名, 参数)this.$emit('changeCount', this.count + 1 );// 这里的参数不是 count++ 否则还是会报错},handleSub () {this.$emit('changeCount', this.count - 1 );}}
}
</script><style>
.base-count {margin: 20px;
}
</style>

在这里插入图片描述

5.口诀

谁的数据谁负责

九、综合案例-组件拆分

1.需求说明

拆分基础组件
渲染待办任务
添加任务
删除任务
底部合计和清空功能
持久化存储

2.拆分基础组件

咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)

在这里插入图片描述

十、综合案例-列表渲染

思路分析：

提供数据：提供在公共的父组件 App.vue
通过父传子，将数据传递给TodoMain
利用v-for进行渲染

十一、综合案例-添加功能

思路分析：

收集表单数据 v-model
监听时间（回车+点击都要进行添加）
子传父，将任务名称传递给父组件App.vue
父组件接受到数据后进行添加 unshift(自己的数据自己负责)

十二、综合案例-删除功能

思路分析：

监听时间（监听删除的点击）携带id
子传父，将删除的id传递给父组件App.vue
进行删除 filter (自己的数据自己负责)

十三、综合案例-底部功能及持久化存储

思路分析：

底部合计：父组件传递list到底部组件 —>展示合计
清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
持久化存储：watch监听数据变化，持久化到本地

源码链接

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

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

创建一个都能访问的事件总线（空Vue实例）

import Vue from 'vue'
const Bus = new Vue()
export default Bus

A组件（接受方），监听Bus的 $on事件

created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
}

B组件（发送方），触发Bus的$emit事件
```
Bus.$emit('sendMsg', '这是一个消息')
```

3.代码示例

EventBus.js

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

BaseA.vue(接受方)

<template><div class="base-a">我是A组件（接收方）<p>{{msg}}</p>  </div>
</template><script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},created () {// 2．在A组件(接收方)，进行监听Bus的事件（订阅消息)Bus.$on( 'sendMsg ' , (msg) => {// console.log(msg)this.msg = msg;})}
}
</script><style scoped>
.base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

BaseB.vue(发送方)

<template><div class="base-b"><div>我是B组件（发布方）</div><button @click="clickSend" >发送消息</button></div>
</template><script>
import Bus from '../utils/EventBus'
export default {methods: {clickSend () {// 3. B组件(发送方) 触发事件,用 $emit 的方式触发事件Bus.$emit('sendMsg', 'B组件成功触发了事件');}}
}
</script><style scoped>
.base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>

App.vue

<template><div class="app"><BaseA></BaseA><BaseB></BaseB> </div>
</template><script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {components:{BaseA,BaseB}
}
</script><style></style>

4.总结

1.非父子组件传值借助什么？

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

5.一个组件发送数据，可不可以被多个组件接收

十五、非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

在这里插入图片描述

3.语法

父组件 provide提供数据

export default {provide () {return {// 普通类型【非响应式】当父元素的相关值发生改变时，后代应用了父元素的值是不会发生改变的。color: this.color, // 复杂类型【响应式】当父元素相关的值发生改变时，后代对应的值也会发生改变。userInfo: this.userInfo, }}，data () {reutrn {color: 'pink', // 简单类型(非响应式)userInfo: { // 复杂类型(响应式) 推荐使用name: 'zs',age: 18}}}，methods: {change () {this.userInfo.name = "ls";}}
}

2.子/孙组件 inject获取数据

export default {inject: ['color','userInfo'],created () {console.log(this.color, this.userInfo)}
}

4.注意

provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
子/孙组件通过inject获取的数据，不能在自身组件内修改

十六、v-model原理

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和 input事件的合写

<template><div id="app" ><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

2.作用：

提供数据的双向绑定

数据变，视图跟着变 :value
视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参，在行类样式中直接写 e 是无法拿到事件对象的，只能通过这种方式 $event 来拿到事件对象。

对于 input 和 click 事件而言，他的形参就是事件对象 e，在上面的 input 事件中，input 中代码的意思就是，当前的input值发生改变时，就将 input 的值实时的赋值给 msg，这就实现了双向数据的绑定。

4.代码示例

<template><div class="app"><input type="text"  /><br /> <input type="text" /></div>
</template><script>
export default {data() {return {msg1: '',msg2: '',}},
}
</script> 
<style>
</style>

5.v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

十七、表单类组件封装

1.需求目标

实现子组件和父组件数据的双向绑定（实现App.vue中的selectId和子组件选中的数据进行双向绑定）

2.代码演示

App.vue

<template><div class="app"><BaseSelect:cityId="selectId"@changeId="selectId = $event"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

BaseSelect.vue

<template><div><select :value="cityId" @change="handleChange"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props: {cityId: String},methods: {handleChange (e) {this.$emit('changeId', e.target.value)}}
}
</script><style>
</style>

十八、v-model简化代码

1.目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2.如何简化：

v-model其实就是 :value和@input事件的简写

子组件：props通过value接收数据，事件触发 input
父组件：v-model直接绑定数据

3.代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

父组件

// v-model 的本质就是 :vaule + @input
<BaseSelect v-model="selectId"></BaseSelect>

十九、.sync修饰符

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

特点：prop 属性名，可以自定义，非固定为 value

简单理解：子组件可以修改父组件传过来的props值### 2.场景

封装弹框类的基础组件， visible属性 true显示 false隐藏

3.本质

.sync修饰符就是 :属性名 和 @update:属性名 合写

4.语法

父组件

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" 
/>

子组件

props: {visible: Boolean
},this.$emit('update:visible', false)

5.代码示例

App.vue

<template><div class="app"><button @click="isShow = true">退出按钮</button><BaseDialog :visible.sync="isShow"></BaseDialog></div>
</template><script>
import BaseDialog from './components/BaseDialog.vue'
export default {data() {return {isShow: false,}},components: {BaseDialog,},
}
</script><style>
</style>

BaseDialog.vue

<template><div class="base-dialog-wrap" v-show="isShow"><div class="base-dialog"><div class="title"><h3>温馨提示：</h3><button @click="close" class="close">x</button></div><div class="content"><p>你确认要退出本系统么？</p></div><div class="footer"><button>确认</button><button>取消</button></div></div></div>
</template><script>
export default {props: {isShow: Boolean,}
}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

6.总结

1.父组件如果想让子组件修改传过去的值必须加什么修饰符？

2.子组件要修改父组件的props值必须使用什么语法？

二十、ref和$refs

1.作用

利用ref 和 $refs 可以用于获取 dom 元素或组件实例

2.特点：

查找范围 → 当前组件内(更精确稳定)

// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.querySelector('.box'));
// 由于document.querySelector('')是全局范围内的，因此，.box盒子前面也使用 .box 盒子时，会发生获取元素出错的现象。

3.语法

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {console.log(this.$refs.chartRef)
}

4.注意

之前只用document.querySelect(‘.box’) 获取的是整个页面中的盒子

5.代码示例

App.vue

<template><div class="app"><BaseChart></BaseChart></div>
</template><script>
import BaseChart from './components/BaseChart.vue'
export default {components:{BaseChart}
}
</script><style>
</style>

BaseChart.vue

<template><div class="base-chart-box" ref="baseChartBox">子组件</div>
</template><script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'export default {mounted() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(this.$refs.baseChartBox)// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例',},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20],},],})},
}
</script><style scoped>
.base-chart-box {width: 400px;height: 300px;border: 3px solid #000;border-radius: 6px;
}
</style>

ref和$refs

作用：利用 ref 和 $refs 可以用于获取 dom 元素或者组件实例

$refs 可以理解为当前vue文件下。$refs.组件名称，可以理解为当前vue文件下的某个组件。

获取组件

目标组件 - 添加 ref 属性

<BaseForm ref="baseForm"></BaseForm>

恰当时机，通过 this.$refs.xxx, 获取目标组件，就可以调用组件对象里面的方法

this.$refs.baseForm.组件方法();

二十一、异步更新 & $nextTick

1.需求

编辑标题, 编辑框自动聚焦

点击编辑，显示编辑框
让编辑框，立刻获取焦点

在这里插入图片描述

2.代码实现

<template><div class="app"><div v-if="isShowEdit"><input type="text" v-model="editValue" ref="inp" /><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="editFn">编辑</button></div></div>
</template><script>
export default {data() {return {title: '大标题',isShowEdit: false,editValue: '',}},methods: {editFn() {// 显示输入框this.isShowEdit = true;// vue的元素更新是异步的，所以在这里的时候，DOM元素还没有更新。// 获取焦点this.$refs.inp.focus() }  },
}
</script>

3.问题

“显示之后”，立刻获取焦点是不能成功的！而且 this.$refs.inp 是 undefined。

原因：Vue 是异步更新DOM (提升性能)，当 this.isShowEdit = true 执行之后，就执行下面的语句了，并没有立刻更行 DOM 元素。因此，一执行 this.$refs.inp.forcus() 就会报错。

4.解决方案

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

语法: this.$nextTick(函数体)

this.$nextTick(() => {this.$refs.inp.focus()
})

注意：$nextTick 内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例

也可以使用 setTimeout( '回调函数', 时间 ); 来解决，但是，setTimeout 函数不太方便准确掌握DOM元素更新的时间。

setTimeout(()=>{this.$refs.inp.focus();
}, 500);