美文网首页Vue3Vue3.0+TS
Vue3+TS Day12 - 非父子组件的通信、事件总线mit

Vue3+TS Day12 - 非父子组件的通信、事件总线mit

作者: 望穿秋水小作坊 | 来源:发表于2021-12-06 15:30 被阅读0次

一、非父子组件的通信(感觉没啥用,后面用到再回顾吧,以后估计都用vuex)

1、非父子组件的通信主要有两种?

image.png

2、认识Provide 和 Inject

image.png

3、认识Provide 和 Inject基本使用

image.png image.png

4、一些细节?

image.png

5、事件总线库mitt的使用?

image.png image.png image.png

二、插槽Slot(重点)

1、通过【props】已经可以向子组件传递参数了,为什么还要【插槽slot】?

  • 【props】可以决定子组件展示的内容
  • 【slot】可以决定子组件用什么元素展示
  • 插槽的使用过程其实是 抽取共性、预留不同
    image.png
image.png

2、插槽的基本使用?

image.png image.png

3、具名插槽是为了处理什么情况而出现的?怎么使用?

image.png image.png image.png

4、更加灵活的插槽【动态名插槽】

image.png

5、什么是渲染作用域?

  • 【父级模板】里的所有内容都是在父级作用域中编译的
  • 【子级模板】里的所有内容都是在子级作用域中编译的
image.png

5、如果父组件想在插槽内访问子组件的数据,要怎么办?

  • 使用作用域插槽
image.png image.png

7、一些细节补充(了解即可)

image.png image.png

相关文章

  • Vue3+TS Day12 - 非父子组件的通信、事件总线mit

    一、非父子组件的通信(感觉没啥用,后面用到再回顾吧,以后估计都用vuex) 1、非父子组件的通信主要有两种? 2、...

  • 使用JavaScript手写一个事件总线功能

    事件总线 事件总线主要是实现一些任意的或非父子关系的组件之间的数据通信 实现一个事件总线功能需要: 事件派发 $...

  • 组件通讯 event bus事件总线 ,Context和prop

    一、event bus 事件总线 进行非父子组件间的通信(兄弟组件) 二、Context的应用场景:在于很多不同层...

  • 非父子组件间通信

    上一篇:父子组件间单向数据流的解决办法 非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件...

  • 非父子组件间的通信

    非父子组件间的通信,可以通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监听事件

  • vue组件通信的补充(非父子)

    创建事件总线eventbus, 它是一个空的Vue实例,它可以用来作为非父子组件通信的桥梁

  • vue事件总线EventBus

    vue组件有父子组件通信:props兄弟组件通信:可以使用vuex,还可以使用事件总线eventBus 使用方法:...

  • 2019-02-14 vue组件基础篇3

    非父子组件通信 1.使用一个空的Vue实例作为中央事件总线(bus)2.bus.$emit('key', 'tex...

  • Vue组件通信

    父组件传值子组件 子组件传值父组件 非父子组件通信 发布订阅模式 / 总线模式 我们使用一个空的Vue实例作为总线...

  • vue组件之非父子组件通信

    关键词:通信 有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的 Vue 实例作为中央事件总线: 实例

网友评论

    本文标题:Vue3+TS Day12 - 非父子组件的通信、事件总线mit

    本文链接:https://www.haomeiwen.com/subject/oipgxrtx.html