vue3父子传值

最新推荐文章于 2025-06-30 17:52:30 发布

原创最新推荐文章于 2025-06-30 17:52:30 发布 · 451 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #前端

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Vue中父子组件的通信方式，通过`ref`属性引用子组件并调用其方法获取数据。在父组件中，使用`ref`定义引用，并在TS部分创建实例和绑定数据，然后调用子组件的`returnCourseData`方法获取数据。子组件方面，通过`defineProps`接收父组件传递的数据，使用`ref`保存状态，并定义一个返回数据的方法供父组件调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面写法是基于setup语法糖

父组件引用：

html部分

<course-drawer ref="courseRef" :form="checkedData"/>

ts部分:

1.引入组件

2.创建实例

3.定义绑定数据

4.调用子组件函数并拿到值

import CourseDrawer from "./baseInfo/courseDrawer.vue";


    const courseRef = ref();
    const checkedData = ref();


     const getCourseData = () => {
        
        const data = courseRef.value.returnCourseData();
        console.log("data:", data);

        
    };

子组件

ts部分

1.声明类型

2.声明传参

3.拿传参的值

4.定义并暴露供父组件使用的函数

import { cloneDeep } from "lodash-es";


interface IForm {
  id: number;
}

const props = defineProps<{
  form: IForm;
}>();


const formData = ref(cloneDeep(props.form));

const returnCourseData = () => {
  return courseCheckedList.value;
};

defineExpose({
  returnCourseData
});