【Vue】day04-组件通信
day04
一、学习目标
1.组件的三大组成部分(结构/样式/逻辑)
scoped解决样式冲突/data是一个函数
2.组件通信
组件通信语法
父传子
子传父
非父子通信(扩展)
3.综合案例:小黑记事本(组件版)
拆分组件
列表渲染
数据添加
数据删除
列表统计
清空
持久化
4.进阶语法
v-model原理
v-model应用于组件
sync修饰符
ref和$refs
$nextTick
二、scoped解决样式冲突
1.默认情况:
写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
全局样式: 默认组件中的样式会作用到全局,任何一个组件中都会受到此样式的影响
局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
2.代码演示
BaseOne.vue
<template><div class="base-one">BaseOne</div> </template> <script> export default { } </script> <style scoped> </style>
BaseTwo.vue
<template><div class="base-one">BaseTwo</div> </template> <script> export default { } </script> <style scoped> </style>
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 函数,得到一个新对象。
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写成函数的目的是什么?
四、组件通信
1.什么是组件通信?
组件通信,就是指组件与组件之间的数据传递
组件的数据是独立的,无法直接访问其他组件的数据。
想使用其他组件的数据,就需要组件通信
2.组件之间如何通信
思考:
组件之间有哪些关系?
对应的组件通信方案有哪几类?
3.组件关系分类
父子关系
非父子关系
4.通信解决方案
5.父子通信流程
父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新
6.父向子通信代码示例
父组件通过props将数据传递给子组件
父组件App.vue
<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件 <Son></Son></div> </template> <script> import Son from './components/Son.vue' export default {name: 'App',data() {return {myTitle: '学前端,就来黑马程序员',}},components: {Son,}, } </script> <style> </style>
子组件Son.vue
<template><div class="son" style="border:3px solid #000;margin:10px">我是Son组件</div> </template> <script> export default {name: 'Son-Child', } </script> <style> </style>
父向子传值步骤
给子组件以添加属性的方式传值
子组件内部通过props接收
模板中直接使用 props接收的值
7.子向父通信代码示例
子组件利用 $emit 通知父组件,进行修改更新
子向父传值步骤
$emit触发事件,给父组件发送消息通知
父组件监听$emit触发的事件
提供处理函数,在函数的性参中获取传过来的参数
8.总结
组件关系分类有哪两种
父子组件通信的流程是什么?
父向子
子向父
五、什么是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>姓名:</div><div>年龄:</div><div>是否单身:</div><div>座驾:</div><div>兴趣爱好:</div></div> </template><script> export default {} </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 {props: ['w'], } </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,validator(val) {// console.log(val)if (val >= 100 || val <= 0) {console.error('传入的范围必须是0-100之间')return false} else {return true}},},}, } </script>
3.注意
1.default和required一般不同时写(因为当时必填项时,肯定是有值的)
2.default后面如果是简单类型的值,可以直接写默认。如果是复杂类型的值,则需要以函数的形式return一个默认值
八、props&data、单向数据流
1.共同点
都可以给组件提供数据
2.区别
data 的数据是自己的 → 随便改
prop 的数据是外部的 → 不能直接改,要遵循 单向数据流
3.单向数据流:
父级props 的数据更新,会向下流动,影响子组件。这个数据流动是单向的
4.代码演示
App.vue
<template><div class="app"><BaseCount></BaseCount></div> </template><script> import BaseCount from './components/BaseCount.vue' export default {components:{BaseCount},data(){}, } </script><style></style>
BaseCount.vue
<template><div class="base-count"><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div> </template><script> export default {// 1.自己的数据随便修改 (谁的数据 谁负责)data () {return {count: 100,}},// 2.外部传过来的数据 不能随便修改//props: {// count: {// type: Number,// }, //} } </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: '',}}, } </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>发送消息</button></div> </template><script> import Bus from '../utils/EventBus' export default { } </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, }} }
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 用于在模板中,获取事件的形参
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></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><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 { } </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)} }
父组件
<BaseSelect v-model="selectId"></BaseSelect>
十九、.sync修饰符
1.作用
可以实现 子组件 与 父组件数据 的 双向绑定,简化代码
简单理解:子组件可以修改父组件传过来的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="openDialog">退出按钮</button><BaseDialog :isShow="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 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.特点:
查找范围 → 当前组件内(更精确稳定)
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(document.querySelect('.base-chart-box'))// 绘制图表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>
二十一、异步更新 & $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 // 获取焦点this.$refs.inp.focus() } }, } </script>
3.问题
"显示之后",立刻获取焦点是不能成功的!
原因:Vue 是异步更新DOM (提升性能)
4.解决方案
$nextTick:等 DOM更新后,才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
this.$nextTick(() => {this.$refs.inp.focus() })
注意:$nextTick 内的函数体 一定是箭头函数,这样才能让函数内部的this指向Vue实例
【Vue】day04-组件通信相关推荐
- (25)Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍 子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
- vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- vue父子组件通信之随机数小练习
目录 vue父子组件通信的理解 父组件代码: 子组件代码: 效果图: vue父子组件通信的理解 1.Vue中子组件不能直接引用父组件的数据,需要通过props选项接收来自父组件的数据. 2.props ...
- vue父子组件通信方法
vue父子组件通信方法 1.父组件向子组件传值,通过自定义属性的方法: 父组件: <child :inputName="name"> 子组件: (1)props: {i ...
- Vue父子组件通信和插槽
Vue父子组件通信 父子组件通信和双向绑定 -如果使用v-model进行双向绑定时,当绑定在组件的props中的数据时,虽然可以完成双向绑定,但会出现警告:因此我们在进行组件双向绑定时,不能直接绑定给 ...
- 自我总结篇之vue的组件通信(父传子 子传父 非父子)
一:父传子 父组件代码如下: <template><div class="father"><child :message='message' :mes ...
- Vue入门 ---- 组件通信
##组件通信: 子组件获取父组件的数据 父组件获取子组件的数据 平行组件之间的通信 vue2.0中用子组件修改父组件数据报错问题 一定需要通过子组件修改父组件 子组件获取父组件的数据 通过子组件中的属 ...
- VUE.js组件通信精髓归纳(基础篇)
前言 文章涉及的内容可能不全面,但量很多,需要慢慢看.我花了很长的时间整理,用心分享心得,希望对大家有所帮助.但是难免会有打字的错误或理解的错误点,希望发现的可以邮箱告诉我1163675970@qq. ...
- Vue 学习06——Vue父子组件通信、非父子组件通信1
目录 ㋀㋊ ✎ 父子组件间通信(Communication) ◆ 组件间通信 父组件向子组件传递数据 ➬ ① 前言 ② demo ➬ 还有一种形式叫做插槽 ◆ 子组件向父组件传递数据 ① 前言 ② ...
- vue父子组件通信,兄弟组件通信
目录 一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
最新文章
- NYOJ-199 无线网络覆盖
- FTP服务器的安装和配置
- 慢慢聊Linux AIO
- 同学录APP开题报告 2017-12-14
- 在 Windows 上部署 gitblit
- createQuery与createSQLQuery
- Val编程-val系列编程思想
- KNNClassifier
- Javascript 对象一(对象详解)
- Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)
- dw1820网卡支持linux吗,黑苹果驱动DW1820A无线网卡教程
- 2020 年全球移动 APT事件总结
- haskell学习笔记(7)-高阶函数Curried functions
- 《ZLToolKit源码学习笔记》(17)网络模块之基础接口封装类SockUtil
- 关于nginx日志的HTTP 499状态码
- Building wheel for opencv-python (PEP 517) 卡住
- CTGNet GIA和CN2 GIA的区别
- ros----键盘控制机器人(2)【键盘控制文件书写】
- 数据校验JSR303快速入门(简单使用、分组效验、自定义注解效验)
- Python实现批量复制文件
热门文章
- 取消浏览器的自动填充密码的一种方式
- 重磅推出:分享阿里云大学Linux学习路线链接
- 【Python编程基础】控制流之链式比较运算符
- Packet Tracer - 配置 PVST+
- 在58同城,白菜价能买到二手车吗?
- 使用脚本自动合并git 2 svn代码
- Activiti 数据库表结构 ACT_HI_ACTINST
- 基于Tensorflow的英文评论二分类CNN模型
- BJFU_2022Web前端开发_CSS样式汇总
- 在JavaScript中判断键盘的大写锁定键(Caps Lock)是否打开(附扫描枪相关规则)