vue3-父子组件通信代码如何写

在 Vue3 中，可以使用 provide 和 inject 实现父子组件之间的通信。

父组件：

<template>
  <div>
    <Child :message="message" />
  </div>
</template>

<script>
import { provide, reactive } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const state = reactive({
      message: 'hello world'
    })
    provide('state', state)
    return {
      state
    }
  }
}
</script>

在父组件中，使用 provide 将数据 state 提供给子组件，并将其包装为响应式对象。

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { inject } from 'vue'

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const state = inject('state')
    return {
      state
    }
  }
}
</script>

在子组件中，使用 inject 获取父组件提供的数据 state，然后将其返回。

在父子组件通信时，可以通过修改 state 对象的属性来实现数据的传递和更新。例如：

<template>
  <div>
    <Child :message="state.message" />
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { provide, reactive } from 'vue'
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  setup() {
    const state = reactive({
      message: 'hello world'
    })
    provide('state', state)

    const changeMessage = () => {
      state.message = 'hello vue3'
    }

    return {
      state,
      changeMessage
    }
  }
}
</script>

在父组件中，通过修改 state.message 的值来更新子组件中的数据。此时，子组件会自动响应这个变化，并且重新渲染。