当前位置:首页 > 技术分析 > 正文内容

vue3父子组件传对象,子组件访问修改父组件对象中的属性值

ruisui885个月前 (01-07)技术分析31

在Vue 3中,父子组件之间的数据传输通常通过props和emit进行。父组件可以通过props向下传递数据给子组件,子组件则可以通过emit向上通知父组件更新数据。如果需要在子组件中修改父组件对象中的属性值,可以使用一个名为ref的Vue 3新特性。

以下是一个示例,演示了如何在Vue 3中实现父子组件之间的对象传递和属性修改:

父组件:

<template>
  <div>
    <h2>父组件</h2>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="increaseAge">增加年龄</button>
    <hr>
    <child-component :person="person" @update:person="updatePerson"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      person: {
        name: '张三',
        age: 25
      }
    };
  },
  methods: {
    increaseAge() {
      this.person.age++;
    },
    updatePerson(newPerson) {
      this.person = newPerson;
    }
  }
};
</script>

子组件:

<template>
  <div>
    <h3>子组件</h3>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="increaseAge">增加年龄</button>
  </div>
</template>

<script>
export default {
  props: {
    person: {
      type: Object,
      required: true
    }
  },
  methods: {
    increaseAge() {
      this.$emit('update:person', { ...this.person, age: this.person.age + 1 });
    }
  }
};
</script>

在这个示例中,父组件中有一个名为person的对象,包含nameage两个属性。父组件通过props将person对象传递给子组件。子组件中有一个按钮,当点击该按钮时,会触发一个名为increaseAge的方法。在increaseAge方法中,我们使用this.$emit向上发送一个事件,并传递一个新的person对象,其中age属性值加1。父组件中监听这个事件,并在事件处理函数updatePerson中更新person对象的属性值。这样,子组件就能够修改父组件对象中的属性值。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/79.html

分享给朋友:

“vue3父子组件传对象,子组件访问修改父组件对象中的属性值” 的相关文章

Git 分支管理策略与工作流程

(预警:因为详细,所以行文有些长,新手边看边操作效果出乎你的预料)团队开发中,遵循一个合理、清晰的Git使用流程,是非常重要的。否则,每个人都提交一堆杂乱无章的commit,项目很快就会变得难以协调和维护。看完这篇文章后,涉及GIT的工作中就会减少因为规范问题导致工作出错,当然如果你现在暂时还未有合...

VIM配置整理

一、基本配色set number set showcmd set incsearch set expandtab set showcmd set history=400 set autoread set ffs=unix,mac,dos set hlsearch set shiftwidth=2 s...

《暗黑破坏神 2:重制版》PC 版 2.3 版本发布,支持英伟达 DLSS

IT之家 12 月 3 日消息,暴雪为《暗黑破坏神 2:重制版》PC 版发布了更新 2.3 版本,添加了“离线难度缩放”滑块(玩家可以在单人游戏时增加挑战和奖励的级别)、多项辅助功能和用户界面改进,以及英伟达 DLSS 支持。玩法改进:玩家现在可以在离线游戏的选项菜单中使用“游戏难度等级”,它提供与...

史上最全 vue-router 讲解 !!!

前端路由 前端路由是后来发展到SPA(单页应用)时才出现的概念。 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成,SPA 不会因为用户的操作而进行页面的重新加载或跳转。 前端路由在SPA项目中是必不可少的,页面的跳转、刷新都与路由有关,通过不同的url显示相应的页面。 优点:前...

三勾点餐系统java+springboot+vue3,开源系统小程序点餐系统

项目简述前台实现:用户浏览菜单、菜品分类筛选、查看菜品详情、菜品多属性、菜品加料、添加购物车、购物车结算、个人订单查询、门店自提、外卖配送、菜品打包等。后台实现:菜品管理、订单管理、会员管理、系统管理、权限管理等。 项目介绍三勾点餐系统基于java+springboot+element-plus+u...

嵌入式实操——基于RT1170 使能SEMC配置SDRAM功能(八)

本文主要是通过迁移的思维,记录本人初次使用NXP MCUXpresso SDK API进行BSP开发MCUXpresso SDK SEMC API 接口链接  在MCUXpresso SDK 框架下提供了对SEMC DDR进行操作的接口。学习链接:https://community.nxp.com/...