Vue3 子组件和父组件的相互调用

Vue3 setup语法糖的子组件和父组件的互相调用

在Vue3中对于父子组件传值的使用与Vue2有些许不同

子组件调用父组件的函数

父组件通过定义函数以及将函数通过@属性=“函数”，将函数传入子组件中

//父组件
<template>
	<ChangeCarrier ref="ChangeCarrierRef"
                   @refresh="getData"></ChangeCarrier>
</template>
<script lang="ts" setup>
import ChangeCarrier from './components/ChangeCarrier.vue'
function getData(){
	alert('我是爸爸的方法')
}
</script>

在子组件中，通过defineEmits来接受父组件绑定在子组件的属性名，即为refresh，再通过emit来调用函数
defineEmits可用与函数数组，即传入多个函数。

//子组件
<template>
	<div @click="clickChild"><div>
</template>

<script lang="ts" setup>
import {defineEmits} from 'vue'
const emit = defineEmits(['refresh'])
function clickChild(){
	emit('refresh')
}
</script>

父组件调用子组件的函数

父组件调用子组件的函数和方法主要通过defineExpose来实现。

//父组件
<template>
	<ChangeCarrier ref="ChangeCarrierRef"></ChangeCarrier>
</template>
<script lang="ts" setup>
import ChangeCarrier from './components/ChangeCarrier.vue'
const ChangeCarrierRef = ref()
ChangeCarrierRef.value.clickChild()
</script>

子组件通过defineExpose暴露

//子组件
<template>
	<div @click="clickChild"><div>
</template>

<script lang="ts" setup>
import {defineExpose} from 'vue'
defineExpose({
  clickChild
})

function clickChild(){
	console.log('我是儿子'）
}
</script>