VUE3父子组件通讯

1.子组件在父组件中的使用

<fromModle :inline="true" :model="model" :config="config" :btnOption="btnOption" 
:selectOption="elSelectOptin" @resetData="resetQuery"  @onSubmit="submit"></fromModle>

import  fromModle from "@/components/fromModle.vue";//script部分

需要将子组件路径导入父组件中，并以标签形式引用。

2.父组件向子组件的传值

3.子组件的接收

<el-form ref="formRef" :model="props.model" :style="{width:props.inline ?'100%': props.width ? props.width : '416px',height:props.inline ? props.height ? props.height : '' >

....
</el-form-item>
<script setup lang="ts">
    ....
    const props = defineProps<Form>()
    ....
</script>

const props = defineProps<Form>() 语句用于接收父组件的传值，props是一个对象，对象里是传值参数名和参数值。如下图为打印出的props值。

defineProps 是 Composition API 的一部分，用于在 <script setup> 语法中定义组件的 props。这个函数用于声明组件期望接收的属性（props），并且可以进行类型检查和验证。

接收后在子组件中对props参数值的使用：

4.子组件向父组件的传值

子组件无法直接更改父组件的值，因此无法对props传来的值进行更改。但可以向父组件传递函数方法携带参数传递。 defineEmits是vue3提供的方法，又称为自定义事件，不需要引入可以直接使用，用于子组件与父组件通信。

子组件emit传递方法：

 父组件接收方法：