Vue3 + React18 + TS4 入门到实战无MiVue3 + React18 + TS4 入门到实战无Mi V

Vue 组件间的通讯方式

前言

在Vue组件库的开发过程中，组件之间的通讯不断是一个重要的课题。固然官方的Vuex状态管理计划能够很好的处理组件之间的通讯问题，但是组件库内部对Vuex的运用常常比拟繁重。本文罗列了几种适用的不运用Vuex的组件间通讯办法，供大家参考。

组件之间通讯的场景

在进入我们今天的主题之前，我们先来总结下 Vue 组件之间通讯的几种场景，普通能够分为如下几种场景：

父子组件之间的通讯

兄弟组件之间的通讯

隔代组件之间的通讯

父子组件之间的通讯

父子组件之间的通讯应该是 Vue 组件通讯中最简单也最常见的一种了，概括为两个局部：父组件经过 prop 向子组件传送数据，子组件经过自定义事情向父组件传送数据。

父组件经过 prop 向子组件传送数据

Vue 组件的数据流向都遵照单向数据流的准绳，一切的 prop 都使得其父子 prop 之间构成了一个单向下行绑定：父级 prop 的更新会向下活动到子组件中，但是反过来则不行。这样会避免从子组件不测变卦父级组件的状态，从而招致你的应用的数据流向难以了解。

额外的，每次父级组件发作变卦时，子组件中一切的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改动 prop。假如你这样做了，Vue 会在阅读器的控制台中发出正告。