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

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

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

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

【Vue3 基础】05.组件化

这是 Vue3 + Vite + Pinia +TS + Element-Plus 实战系列文档。最近比较忙没什么时间写文章,争取早日把这个系列完结吧~生命周期和模板引用在本章之前,我们通过响应式 api 和声明式渲染,处理了 DOM 的更新,但光是这些,对于一些复杂的需要手动操作 DOM 的情况,...

GitLab-创建分支

描述分支是独立的生产线,是开发过程的一部分。分支的创建涉及以下步骤。创建一个分支步骤1-登录您的GitLab帐户,然后转到“ 项目”部分下的项目。步骤2-要创建分支,请单击“ 存储库”部分下的“ 分支”选项,然后单击“ 新建分支”按钮。步骤3-在“ 新建分支”屏幕中,输入分支的名称,然后单击“ 创建...

Gitlab 的使用和代码审查流程介绍

1、先简洁介绍下项目常用的信息-面板统计页面2、用户信息面板3、服务器信息4、项目信息5、重点介绍代码提交审核机制和授权合并机制开发人员推送代码的时候不能直接推送到master,否则就会报错。此时开发人员要本地新建分支然后在提交上来列出修改了哪些细节管理员可以管理这些分支合并到master6、指派合...

10分钟搞定gitlab-ci自动化部署

gitlab-ci 是持续集成工具/自动化部署工具,类似 jenkins。持续集成 是将代码集成到共享存储库并尽可能早地自动构建/测试每个更改的实践 - 通常一天几次。概述在编码完成时都会进行打包发布过程,如果每次都手动操作这一步骤就会浪费时间,效率低下。所以就有了持续集成。准备事项请提前安装以下软...

用IDEA开发如何用Git快速拉取指定分支代码?

1,准备空的文件夹,git init2,关联远程仓库,git remote add origin gitlab地址3,拉取远程分支代码,git pull origin 远程分支名再用IDEA打开项目即可...

高效使用 Vim 编辑器的 10 个技巧

在 Reverb,我们使用 MacVim 来标准化开发环境,使配对更容易,并提高效率。当我开始使用 Reverb 时,我以前从未使用过 Vim。我花了几个星期才开始感到舒服,但如果没有这样的提示,可能需要几个月的时间。这里有十个技巧可以帮助你在学习使用 Vim 时提高效率。1. 通过提高按键重复率来...