Vue3中的7种组件通信方式

原文链接：Vue3中的7种组件通信方式那么我们就来聊聊以下七种组件通信方式：propsemitv-modelrefsprovide/injecteventBusvuex/pinia作为例子，本文将使用如下演示，如下图所示：上图中，列表和输入框是分别是父组件和子组件。根据不同的通信方式，父子组件会有所调整。Propsprops是Vue中最常见的父子通信方式，使用起来也比较简单。根据上面的demo，我们在父组件中定义数据和对数据的操作，子组件只渲染一个列表。父组件代码如下：子组件只需要渲染父组件传过来的值。代码如下：EmitEmit也是Vue中最常用的组件通信方式，用于子组件向父组件发送消息。我们在父组件中定义列表，子组件只需要传递添加的值即可。子组件代码如下：点击子组件中的【添加】按钮后，我们会发送一个自定义事件，并将添加的值作为参数传递给父组件。父组件代码如下：在父组件中，只需要监听子组件的自定义事件，然后执行相应的添加逻辑即可。v-modelv-model是Vue中一个优秀的语法糖，比如下面的代码。这是的简写，这样确实简单很多。现在我们将使用v-model来实现上面的例子。子组件代码如下：