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

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

ruisui884个月前 (01-07)技术分析23

在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父子组件传对象,子组件访问修改父组件对象中的属性值” 的相关文章

Linux发行版Nobara更新39版本,号称“专为游戏玩家定制”

IT之家 12 月 27 日消息,Linux 发行版 Nobara 今天推出了 39 版本,主要改进了“Gamescope 合成器”,并更新了 OBS Studio、部分驱动程序及 Nautilus 文件管理器,小伙伴们可以点此访问项目地址。IT之家经过查询得知,Nobara 是一款基于 Fedor...

GitLab 14.6发布,优化Geo高可用,安全更新等

昨天,GitLab官方按照管理发布了有一个月度版本GitLab 14.6的发布,这也是本年度收官版本。14.6中在安全合规性方面,在Geo方面以及MD代码块一键复制等方便做了优化,另外还在UI图标方面发布了一套全新的图标。详细情况请和虫虫一起学习。GitLab 14.6主要改进使用 Geo 实现无缝...

内存问题探微

这篇文章是我在公司 TechDay 上分享的内容的文字实录版,本来不想写这么一篇冗长的文章,因为有不少的同学问是否能写一篇相关的文字版,本来没有的也就有了。说起来这是我第二次在 TechDay 上做的分享,四年前第一届 TechDay 不知天高地厚,上去讲了一个《MySQL 最佳实践》,现在想起来那...

HTML5最新版本介绍

HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本,由一群自由思想者设计,最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本,它是用于生成现代 Web内容的一系列相关技术的总称,其中最重要的三个技术是:HTML5核心规范...

el-table内容\n换行解决办法

问题请求到的数据带有换行符 '\n'但页面展示时不换行statusRemark: "\"1、按期完成计划且准确率100%,得100分;\n2、各项目每延误1天,扣1分;每失误1次或者员工投诉1次,扣3分,失误层面达到公司级影响较大的,该项绩效分数为0\"\n&...

别让“跑焦”毁所有!仅需这一项设置,即可显著改善镜头对焦精度

我常常会收到一些摄影爱好者的私信,也一直在努力的帮助大家解决更多摄影中常见问题。在我收到的所有问题中。有一个问题是最麻烦的,那就是“为什么我的图像看起来模糊?”。这个问题几乎每个人都遇到过,究其原因可以说是多种多样相对复杂。起初我一直认为是对焦问题所导致,也就有了我之前所写的“后按对焦”以及“对焦模...