vue3组件间通信代码详细

Vue3中的组件间通信可以通过props、emit、provide/inject、ref等方式实现。以下是一些示例代码：

1. 使用props和emit进行父子组件间通信：

父组件模板：

<template>
  <ChildComponent :message="parentMessage" @update-message="updateParentMessage" />
</template>

父组件逻辑：

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

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = ref('Hello from parent')
    const updateParentMessage = (message) => {
      parentMessage.value = message
    }

    return {
      parentMessage,
      updateParentMessage
    }
  }
})

子组件模板：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

子组件逻辑：

import { defineComponent, props, emit } from 'vue'

export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    const updateMessage = () => {
      emit('update-message', 'Hello from child')
    }

    return {
      updateMessage
    }
  }
})

2. 使用provide/inject进行祖先组件向后代组件传递数据：

祖先组件逻辑：

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

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const message = 'Hello from ancestor'
    provide('message', message)
  }
})

后代组件逻辑：

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    const message = inject('message')

    return {
      message
    }
  }
})

3. 使用ref进行父子组件间通信：

父组件模板：

<template>
  <ChildComponent ref="childComponentRef" />
</template>

父组件逻辑：

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

export default defineComponent({
  components: {
    ChildComponent
  },
  setup() {
    const childComponentRef = ref()

    const updateChildMessage = (message) => {
      childComponentRef.value.updateMessage(message)
    }

    return {
      childComponentRef,
      updateChildMessage
    }
  }
})

子组件逻辑：

import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const message = ref('Hello from child')

    const updateMessage = (newMessage) => {
      message.value = newMessage
    }

    return {
      message,
      updateMessage
    }
  }
})

以上是一些常见的组件间通信方式的示例代码，具体应该根据实际需求选择合适的方式。