vue3父子组件间通信方法

《vue3父子组件间通信方法》

在Vue3项目开发中，父子组件间的通信是常见的需求。为了解决这一问题，我们可以利用props和$emit、provide和inject等机制。

一、使用props和$emit

这是最常用的一种方式。父组件通过props向子组件传递数据，子组件通过$emit触发事件并给父组件传递数据。

定义父组件：
```html

import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const parentMsg = ref('来自父组件的消息')
// 接收子组件传来的消息
const updateMsg = (msg) => {
parentMsg.value = msg
}

</p>

<p>然后是子组件：
```html

  <div>
    <!-- 显示从父组件接收的数据 -->
    <p>{{myMsg}}</p>
    <button>发送消息给父组件</button>
  </div>
</p>


defineProps(['myMsg'])
// 定义触发的事件
const emit = defineEmits(['change - msg'])

const sendMessage = () => {
  // 触发事件并传递数据
  emit('change - msg', '来自子组件的新消息')
}


<p>

二、使用provide和inject

这种方式适用于祖孙组件或者多层级嵌套组件间的通信。父组件使用provide提供数据，子孙组件用inject注入数据。

父组件代码如下：
```html

import { provide, ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const sharedMsg = ref('共享的消息')

provide('shared - msg', sharedMsg)

</p>

<p>子组件代码：
```html

  <div>
    <!-- 显示注入的数据 -->
    <p>{{injectedMsg}}</p>
  </div>
</p>


import { inject } from 'vue'

const injectedMsg = inject('shared - msg')


<p>

以上就是Vue3中父子组件通信的两种常见方法，根据实际项目需求选择合适的方式可以更高效地进行组件间的交互。