Vue3 学习 5

组件通信

【props】

概述:props是使用频率最高的一种通信方式,通常与父<->子

  • 若父传子:属性值是非函数
  • 若子传父:属性值是函数

自定义事件

子传父

mitt

收数据的:提前绑定好事件(提前订阅消息)

提供数据:在合适的时候触发事件(发布消息)

弟弟在收数据(绑),哥哥在提供数据(触发时间)

组件通信v-model

$event到底是啥,啥时候能.target

  • 对于原生事件,$event就是是事件对象
  • 对于自定义事件,$event就是触发事件,所传递的数据==>不能.target

v-model既能父传子也能子传父

value是可以改的,例如改成abc,可以写多个v-model,传几个v-model就收几个defineProps,在下面对应写几个事件

【$attrs】

1.概述:$attrs用于现实当前组件的父组件 ,向当前组件的子组件 通信(祖->孙)

2.具体说明: $attrs是一个对象,包含所有父组件传入的标签属性

父亲的数据:

儿子将父亲的数据传给孙子:

孙子接收数据:

【refs、 parent】

1.概述:

  • $refs用于:父->子
  • parent用于:子-\>父 2.原理如下: refs:值为对象,包含所有被ref属性标识的DOM元素或组件实例
    $parent:值为对象,当前组件的父组件实例对象
    父亲

    儿子1:

    儿子2:

【provide、inject】

provide(名字,值)

父亲提供:

孙子获取inject:

插槽

默认插槽


父元素使用双标签,子元素使用插槽slot

具名插槽

具有名字的插槽

具名插槽是默认插槽的一种。

作用域插槽

数据在子那边,但根据数据生成的结构,却由父亲决定

压岁钱在孩子那,但根据压岁钱买的东西,却由父亲决定

作用域

子组件 结构由父亲决定


相关推荐
小码哥_常3 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮5 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
代码山河6 小时前
Python就业方向全解析:后端、爬虫、数据分析、AI你选哪个?
python·学习·架构·教程·面向对象·项目
释厄6236 小时前
AI学习层更新与跨体转移律——人类社会同构·不缺理解缺 U
人工智能·学习
她说可以呀7 小时前
Vue插槽
前端·javascript·vue.js
qq_448011167 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan7 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_958352908 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝8 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing039 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript