vue3 父子组件调用方法
在Vue 3中，父子组件之间的通信是一个常见的需求。通常有以下几种解决方案：使用props和emit进行数据传递与事件触发、使用provide/inject提供依赖注入，或者通过全局状态管理工具如Vuex（对于大型项目）。前两种常用的方式，并给出具体代码示例。
一、使用props和emit
这是最基础也是最常见的父子组件通信方式。
- 父组件向子组件传递数据
父组件可以通过props给子组件传递数据。在子组件中定义接收的属性：
vue
// 子组件Child.vue
<div>
{{ message }}
</div>
</p>
defineProps({
message: {
type: String,
required: true
}
})
<p>然后在父组件中使用这个子组件并传入数据：
vue
// 父组件Parent.vue
</p>
import Child from './Child.vue'
const parentMessage = 'Hello Child Component!'
<p>- 子组件向父组件发送消息
子组件可以使用emit来触发自定义事件，从而通知父组件。子组件内：
vue
// 子组件Child.vue</p>
const emit = defineEmits(['childEvent'])
function sendToParent() {
emit('childEvent', 'This is a message from child')
}
<p>
<button>Click me</button>
父组件监听该事件：
vue
// 父组件Parent.vue
</p>
import Child from './Child.vue'
function handleChildEvent(msg) {
console.log(msg)
}
<p>二、使用provide/inject
当存在多层嵌套组件时，provide/inject可以简化跨层级组件间的通信。
- 父组件提供数据
vue
// 父组件Parent.vue</p>
import { provide, ref } from 'vue'
const providedData = ref('Provided by Parent')
provide('dataKey', providedData)
<p>- 子组件注入数据
vue
// 子组件Child.vue</p>
import { inject } from 'vue'
const injectedData = inject('dataKey')
console.log(injectedData.value)
<p>以上就是在Vue 3中实现父子组件调用方法的两种主要思路，根据实际项目需求选择合适的方式即可。
