总结了Vue3的七种组件通信方式，别再说不会组件通信了

总结了Vue3的七种组件通信方式，组件通信就不多说了管理工具）开始做事~举个栗子俗话说，学的时候不写demo就是耍流氓~本文将重点介绍下面的demo，如下图：demo.gif上图中，_list_和_输入框_分别是父组件和子组件。根据传值方式，可以调整谁是父组件，谁是子组件。Props方法Props方法是Vue中最常见的父子相传方式，使用起来也比较简单。根据上面的demo，我们在父组件中定义数据和数据操作，子组件只渲染一个列表；父组件代码如下：复制代码子组件只需要渲染父组件传过来的值，代码如下：复制代码emit方法emit方法也是Vue中最常用的组件通信方法，用于child-to-parent；根据上面的demo，我们在父组件中定义list，子组件只需要将添加的值传递给子组件即可代码如下：点击后复制代码子组件中的[Add]按钮，发出自定义事件并将添加的值作为参数传递。父组件代码如下：复制代码在父组件中，只需要监听子组件的自定义事件，然后执行相应的添加操作即可。v-model方法v-model是Vue中一个优秀的语法糖，比如下面的代码复制代码就是下面代码的缩写复制代码v-model确实容易很多。下面我们来看看上面的demo，以及如何使用v-model来实现。子组件复制代码在子组件中，我们先定义props和emits，添加后emit指定的事件。注意：update:*是Vue中固定的写法，*代表props中的一个属性名。在父组件中使用比较简单，代码如下：复制代码refs在使用optionAPI时，我们可以通过this.$refs.name获取指定的元素或组件，但是在combinedAPI中不能使用那个方法获取。如果我们想通过ref获取组件或者元素，我们需要定义一个同名的Ref对象，组件挂载后才能访问。示例代码如下：