vue3 父子通信写法
时间: 2023-09-11 08:04:53 浏览: 51
Vue3 中父子组件通信的写法和 Vue2 有所不同。在 Vue3 中可以使用 `provide` 和 `inject` 来实现组件之间的数据传递。
父组件使用 `provide` 来提供数据,子组件使用 `inject` 来注入数据。具体写法如下:
```
// 父组件
<template>
<div>
<child-component />
</div>
</template>
<script>
import { provide } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
setup() {
const message = 'Hello, World!'
provide('message', message)
}
}
</script>
// 子组件
<template>
<div>
{{ message }}
</div>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const message = inject('message')
return {
message
}
}
}
</script>
```
在父组件中使用 `provide` 来提供数据,在子组件中使用 `inject` 来注入数据。注入的数据可以通过在 `inject` 中传入一个默认值来实现数据不存在时的默认处理。