什么是Vue组件通讯 Vue.js 组件通信是指在 Vue 应用的不同组件之间进行数据交换和状态同步的过程。由于 Vue 的组件是基于单文件组件（SFCs）的模块化设计，每个组件都有自己的作用域，因此它们不能直接访问彼此的数据。为了使组件之间能够协同工作，Vue 提供了几种不同的通信方式。以下是 Vue 中常见的组件通信模式：1.父子组件通讯，2.子父组件通讯。

父子组件通讯

简单明了的说父子组件通讯,其实就是父组件通过v-bind指令，将值传给子组件，而子组件使用Vue自带的defineProps接收父组件传过来的值。

我们使用命令行创建一个Vue项目之后

 npm create vue@latest 

在App.vue文件中我们开始实现父子组件通讯，我们在src文件夹下的components文件下，创建第一个子组件child.vue.首先我们需要把子组件引入父组件中，在Js部分我们用import引入

    import Child from '@/components/child.vue'    \或者 import Child from './components/child.vue'

可以看到，这个界面中有一个input输入框，以及一个列表。我们需要在输入框中，输入信息，就会在列表中显示我们输入的内容。这里既然是父传子，我们就在父组件中写输入框，在子组件写列表就好了。在父组件中我们引入了子组件，引入的名称，就可以当做一个标签使用，用来展示子组件的内容。

<template>  <div class="input-group">    <input type="text" v-model="value">    <button @click="add">添加</button>  </div>  <Child :msg="toChild"></Child></template>

在input框，我们使用v-model(v-model是Vue.js框架中用于实现表单输入和其他元素的双向数据绑定的指令。)进行数据绑定,使用v-model进行双向绑定，方便我们获取到输入框的数据，并把该数据传给子组件。button按钮，我们使用@click绑定了一个添加函数add()。<Child :msg="toChild"></Child> 这就是我们将引入的子组件作为标签使用，可以理解为我们打开了一个门，可以到达子组件。msg是参数名,toChild是参数值，在子组件中我们获取参数名就好了。 现在我们来思考，Js部分我们需要什么，首先我们使用v-model对value进行了双向绑定，，也即时说当输入框中的value值发生了改变，我们Js部分的value也需要改变，反过来也是一样的，这里我们就需要使用到一个响应式数据的概念，在vue中带有一个模块叫做ref可以让我们把数据变成响应式数据(也有个一reactive,作用是一样的，但是作用对象不一样)。然后还有一个值叫作toChild传给子组件也是一个响应式数据。在函数add()我们需要的时，把输入框中的数据value传给子组件，而toChild就是传给子组件的值，所以我们只需要把value 赋值给toChild就好了

<script setup>import Child from './components/child.vue'import { ref } from 'vue'const value = ref('')const toChild = ref('')const add = () => {  toChild.value = value.value}</script>

那么子组件child.vue又该如何实现呢，在子组件中我们需要展示列表中的数据，这里我们肯定不是一个li一个li的写，可以直接只用到v-for(v-for是Vue.js中的一项非常重要的指令，用于在模板中迭代数组、对象或集合。)指令输出就好了.我们定义一个数组用来存放数据，我们遍历输出数组，同时将父组件的值添加到数组中，所以这边，数组也就会是一个响应式数据了。我们向输入框中输入数据，并添加。这个数组就会改变，但是如果我们不对这个数组进行监听，v-for遍历的数据是不会更新的，在vue存在一个监听watch可以对数据的更新进行监听。

<template>    <div class="child">      <ul>        <li v-for="item in list">{{ item }}</li>      </ul>    </div>  </template>    <script setup>  import { ref, watch } from 'vue'  const list = ref(['html', 'css', 'js'])  const props = defineProps({    msg: ''  })    watch(    () => props.msg,    (newVal, oldVal) => {      list.value.push(newVal)    }  )    </script>    <style lang="css" scoped></style>

这里我们使用defineProps接受父组件传来的参数.在vue的API文档是这样介绍watch的

这样我们就实现了父子组件通讯。

子父组件通讯

子父组件通讯那就是反过来的意思呗，子组件将值传给父组件，例子依旧是这个例子

现在我们在子组件中写输入框，父组件写列表。child2.vue

<template>    <div class="input-group">      <input type="text" v-model="value">      <button @click="add">添加</button>    </div>  </template>    <script setup>  import { ref } from 'vue'  const value = ref('')     const emits = defineEmits(['add1'])  // 创建一个add事件  const add = () => {    // 将value给到父组件    emits('add1', value.value)  // 发布事件  }  </script>    <style lang="css" scoped>    </style>

写法其实没有太大差别，重点是defineEmits(在 Vue 3 中，defineEmits 是一个用于定义组件可以触发的自定义事件的选项。这使得组件的使用者能够明确地知道哪些事件是可以从这个组件中发出的，从而增强了代码的可读性和可维护性。),我们先创建了一个事件'add1',当我们触发事件'add1'就会把事件发布出去，同时会把参数va;ue.value传出去，当谁订阅事件add1,谁就可以拿到参数value.value.父组件App2.vue的写法也很简单

<template>    <!-- 订阅add1事件 -->    <Child @add1="handle"></Child>      <div class="child">      <ul>        <li v-for="item in list">{{ item }}</li>      </ul>    </div>    </template>    <script setup>  import Child from '@/components/child2.vue'  import { ref } from 'vue'  const list = ref(['html', 'css', 'js'])    const handle = (event) => {    list.value.push(event)  }  </script>    <style lang="css" scoped>    </style>

我们需要在<Child/>标签中订阅这个事件就好了，同时触发函数handle,这个函数自带一个形参event,这个形参是指就是事件add1带过来的参数value.value. 当然实现子父组件通讯也可以使用v-model对父组件的值与子组件的值进行双向绑定。 写法跟订阅事件其实差不多App3.vue

<template>    <Child v-model:list="list"></Child>      <div class="child">      <ul>        <li v-for="item in list">{{ item }}</li>      </ul>    </div>    </template>    <script setup>  import Child from '@/components/child3.vue'  import { ref } from 'vue'  const list = ref(['html', 'css', 'js'])    </script>    <style lang="css" scoped>    </style>

我们借助v-model对数据list双向绑定，我们在子组件中接收list值，并对它进行数据更新。子组件child3.vue

<template>    <div class="input-group">      <input type="text" v-model="value">      <button @click="add">添加</button>    </div>  </template>    <script setup>  import { ref, defineProps } from 'vue';  const value = ref('')    const props = defineProps({    list: {      type: Array,      default: () => []    }  })    const emits = defineEmits(['update:list'])  const add = () => {    const arr = props.list    arr.push(value.value)    emits('update:list', arr)  }  </script>    <style lang="css" scoped></style>

值得一提的是，在子组件中我们也使用到了defineEmits但是在父组件中，我们并没有订阅事件，这是因为，我们的v-model是双向绑定数据，当子组件中的list的值发生了改变，就会触发v-model,等同于我们触发了订阅。