父子传参props
引入组件
标签传参
子组件通过defineProps定义一下类型接收参数
子父传参 注册自定义事件,在子组件中通过$emit进行触发从而回传值
父组件向子组件传递方法,使用的是 事件绑定机制;v-on:
当我们自定义一个事件属性之后,那么,子组件就能够通过某种方法,来调用传递进去的这个方法了。
简单理解:父组件通过传递 注册函数方法 给子组件,在子组件中,子组件通过 $emit(“传给子组件的方法名”,xxx) 来把要传的值通过参数传给父组件;
爷孙 provider inject
vue3提供了 祖宗组件==>后代组件 这样一种通信方式
祖宗组件从vue中解构provide方法,并传递数据
后代组件从vue中解构inject方法,调用接收数据
不定层级组件 pina
非父子EventBus
公交车 ==> EventBus
完全没有关系的两个人,可以上同一辆车,这两个人在一辆车上就可以依赖这辆车进行通信了。
定义一个EventBus类,实现单例模式,导出实例对象
哪个组件要接收数据,主动导入这个对象,并调用对象的方法绑定事件,事件函数就在这个组件中,可以通过 参数接收数据
哪个组件要传递数据,主动导入这个对象,并调用对象的触发事件的方法,并传递数据
Ref
父子通信。
不会主动传递,而是父组件强行提取子组件实例对象,其中就有子组件的数据和方法。
子组件通过defineExpose暴露数据和方法
父组件定义ref空数据
给子组件自定义标签上添加ref属性,值是定义ref数据的名称
在挂载阶段,就可以访问ref数据的value属性,就可以代表子组件对象,其中会包含子组件暴露出来的属性和方 法
插槽
父子通信
匿名插槽
父给子传递模板视图。
父组件给子组件自定义标签中,放入一段模板内容
子组件中通过slot标签接收,最终slot标签所在位置,就会被替换为父组件放进去的模板内容。