vue3父子组件传值defineProps，子组件回调方法defineEmits

最新推荐文章于 2024-05-25 10:44:10 发布

前端小云儿

最新推荐文章于 2024-05-25 10:44:10 发布

阅读量619

点赞数

分类专栏： vue技能提升文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136069888

版权

vue技能提升专栏收录该内容

46 篇文章 2 订阅 ¥9.90 ¥199.90

订阅专栏

超级会员免费看

本文介绍了Vue3中如何使用`defineProps`进行父组件向子组件传递数据，以及子组件如何通过`defineEmits`定义并调用回调方法来向父组件发送消息，详细阐述了父子组件间的通信机制。

摘要由CSDN通过智能技术生成

父组件

<template>
  <div id="app">
    <h3>父子组件传值defineProps，子组件回调方法defineEmits</h3>
    <el-button @click="changeListFun"
      >父组件修改值子组件跟着变化，无论数组换是对象</el-button
    >
    <h4>这是子组件给父组件传值：{
  { childToFatherData }}</h4>
    <h3>1 ref和组件名称不要相同 2 ref需要先被定义</h3>
    <!--传递一个id 一个list -->
    <homeCom
      ref="refHomeCom"
      :id="id"
      :list="list"
      :obj="obj"
      @chiLdToFatherFun="chiLdToFatherFun"
    ></homeCom>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import homeCom from "./chi