Vue 组件封装,父组件传参给子组件,子组件调用父组件。

news2024/11/13 16:43:38

        在 Vue 开发中,组件化是提升代码复用性可维护性的重要手段。通过组件化,可以将常用的功能封装为独立的组件,并在需要的地方复用。本文将介绍如何在 Vue 中实现父组件与子组件之间的数据传递,以及子组件如何调用父组件的方法。

一、组件封装的基本思路

在 Vue 中,通常会将一些可复用的逻辑、UI 封装成单独的组件。比如一个表单,如果需要在多个地方使用,最好的做法是将其提取为一个子组件,而不是在多个地方重复编写相同的代码。

项目场景

        前端有一个页面,需要要 《新增》 与 《详情》 展示一个内容一样的表单窗口。为了代码复用,我们将表单窗口提取为一个子组件,并且嵌入到《新增》 与 《详情》的代码中复用。我们需要在父组件中控制这个表单的显示与隐藏,并在表单提交后关闭窗口并刷新父组件的数据。

二、父组件向子组件传递数据与子组件调用父组件方法

        在 Vue 中,父组件通过 props 向子组件传递数据。props 是一种单向数据流,从父组件流向子组件。子组件在执行保存表单后调用父组件的方法实现,关闭窗口与刷新父组件数据列表。我们来看以下实现代码:

1. 父组件

<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>Parent Component</h1>
    <button @click="openForm">Open Form</button>

    <!-- 新增窗口 -->
    <Drawer title="新增车辆"   :mask-closable=false
                :closable=true v-model="show_edit_win" width="900"
                style="position: relative">

                <!-- 使用 props 向子组件传递数据 -->
                <edit-form  @close-form="handleCloseForm" @refresh-data="refreshData" :brand-data="brandList" ></edit-form>

    </Drawer>

<Drawer title="车辆详情"    :mask-closable=false
                :closable=true v-model="show_detail_win" width="1200"
                style="position: relative">

            <Tabs value="sub_win_tab" style="height: 100%;">

                <TabPane label="车辆信息" name="1">
                    <edit-form :form-data="entity"  @refresh-data="refreshData" :brand-data="brandList" ></edit-form>
                </TabPane>


                <TabPane label="车辆使用记录" name="2">

                </TabPane>

                <TabPane label="车辆维修记录" name="3">

                </TabPane>
            </Tabs>


        </Drawer>



  </div>
</template>

<script>
import editForm from "./edit_form";

export default {
  components: {
    editForm 
  },
  data() {
    return {
      show_detail_win: false,  // 控制表单是否显示
      brandList:[] //车辆品牌
    };
  },
  methods: {
    openForm() {
      this.show_detail_win = true;
    },
  handleCloseForm() {
                 this.show_edit_win=false;
            },
            refreshData() {
                //业务处理,一般是重新调用拉列表数据
            },
  }
};
</script>

2. 子组件

<!-- edit_form.vue -->
<template>
    <div>
        <Form :label-width="90" :model="entity" ref="entity_edit" :rules="ruleValidate">

            <div><h4>车辆信息</h4></div>

            <Row :gutter="24">

                <Col span="8">
                    <FormItem label="车辆号码:" prop="code">
                        <Input v-model="entity.code" > </Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="车辆VIN:" prop="vinCode">
                        <Input v-model="entity.vinCode" > </Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="车辆品牌:">
                        <Select placeholder="车辆品牌" v-model="entity.brand"  clearable>
                            <Option v-for="item in brandList" :value="item.brand" :key="item.brand">{{item.brand}}</Option>
                        </Select>
                    </FormItem>
                </Col>

            </Row>

            <Row :gutter="24">
                <Col span="8">
                    <FormItem label="车辆系列:" prop="cardType">
                        <Input v-model="entity.series" > </Input>

                    </FormItem>
                </Col>

                <Col span="8">
                    <FormItem label="车辆型号:" prop="cardNo">
                        <Input v-model="entity.model" > </Input>
                    </FormItem>
                </Col>

                <Col span="8">
                    <FormItem label="车辆类型:" prop="cardType">
                        <Select v-model="entity.type" placeholder="请选择车辆类型"   clearable>
                            <Option v-for="item in typeList" :key="item.value" :value="item.value">{{item.label}}</Option>
                        </Select>
                    </FormItem>
                </Col>

            </Row>

            <Row :gutter="24">
                <Col span="24">
                    <FormItem label="备注" prop="remark">
                        <Input v-model="entity.remark" type="textarea" :autosize="{minRows: 5,maxRows: 8}"
                                style="width: 800px;"
                               placeholder="请输入备注信息..."> </Input>
                    </FormItem>
                </Col>
            </Row>
        </Form>
      

        <div style="text-align: center;padding-bottom: 10px;">
            <Button type="primary"  @click="doSave">保存</Button>
        </div>


    </div>
</template>

<script>
    export default {
        name: "edit_form",
        props: {
            formData: { //父组件在修改时传入的原对象数据,传入的不是引用而是副本。
                type: Object,
                required: false
            },
            brandData: {  //父组件传入的品牌数据
                type: Array,
                required: true
            }
        },
        data() {
            return {
                brandList:[...this.brandData],//品牌列表
                typeList:[
                    {value:1,label:'公交车'},
                    {value:2,label:'私家车'},
                ],
                updateUrl: '/backend/resources/vehicle/edit',
                saveUrl: '/backend/resources/vehicle/save',
                entity:{...this.formData},
                ruleValidate: {
                    code: [ {required: true, message: '不能为空', trigger: 'blur'}],
                    vinCode: [ {required: true, message: '不能为空', trigger: 'blur'}],
                    contacts: [ {required: true, message: '不能为空', trigger: 'blur'}],
                    remark: [
                        {required: false, message: '', trigger: 'blur'},
                        {type: 'string', max: 30, message: '最多可录入30个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            //增加或修改车辆
            doSave () {
                let self = this;
                self.$refs.entity_edit.validate((valid) => {
                    if (valid) {
                        let req = self.saveUrl;
                        if (self.$util.isNotEmpty(self.entity.id)) {
                            req = self.updateUrl;
                        }
                        self.$axios.post(req, self.entity).then(res => {

                            if(res.code==200){
                                self.$Message.success('操作成功!');
                                self.$emit('refresh-data');  // 触发刷新数据的事件
                                self.$emit('close-form');  // 触发关闭表单的事件
                            }else{
                                self.$Message.error(res.msg);
                            }

                        }).catch(e =>{
                            self.show_edit_win = true;
                        });
                    }
                });
            },
        }
    }
</script>

<style scoped>

</style>

3. 代码关键点解释

   1 父组件向子组件传递数据:
  • 父组件通过 props 向子组件传递数据。在这个例子中,父组件将 parentFormData 传递给了子组件 FormComponent,子组件通过 props 接收这个数据。

  • 子组件不能直接修改传入的 props,因为 props 是不可变的。如果子组件需要修改这些数据,通常会将 props 的数据复制到本地状态(如 localFormData),然后操作本地数据。

   2 子组件调用父组件方法

        子组件不能直接调用父组件的方法。但我们可以通过事件通信的方式,让子组件触发事件,父组件监听事件并调用相应的方法。这种通信方式是 Vue 框架推荐的做法,符合单向数据流的设计思想

     具体步骤:
  1. 父组件定义方法:父组件中定义关闭表单和刷新数据的方法。
  2. 子组件触发事件:子组件通过 $emit 触发自定义事件。
  3. 父组件监听事件:父组件通过事件监听器捕获子组件触发的事件,并执行对应的方法。
  • 子组件通过 $emit 触发自定义事件。在表单提交后,子组件使用 this.$emit('close-form') 触发事件,通知父组件关闭窗口;同样使用 this.$emit('refresh-data') 触发事件,通知父组件刷新数据。

  • 父组件通过事件监听器监听事件。父组件通过 @close-form="handleCloseForm"@refresh-data="refreshData" 监听子组件触发的事件,并在事件发生时执行相应的方法。

4. 实现后的效果

  以上代码实现的效果图如下:

父组件新增】使用子组件后如下:

 父组件详情】使用子组件后如下:

三、总结

        在 Vue 的组件化开发中,父组件与子组件的通信是常见需求。通过 props,父组件可以向子组件传递数据;通过 $emit 事件,子组件可以通知父组件执行相应的操作。这样的单向数据流和事件通信机制,保证了组件之间的解耦和代码的可维护性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2086516.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在随机点实现凸包包围游戏地区

讲解视频在连接点之后&#xff0c;想起来两年前看数学书&#xff0c;记住凸包二字&#xff0c;连接敌人外围点&#xff0c;意外找到凸包算法_哔哩哔哩_bilibili //author bilibili 民用级脑的研发记录 // 开发环境 小熊猫c 2.25.1 raylib 版本 4.5 // 2024-7-14 // AABB 碰撞…

Vue——认识day03_事件

此处接上一篇文章Vue——认识day2开始&#xff0c;欢迎大家。 目录 1.事件处理 2.事件修饰符 3.键盘事件 总结 1.事件处理 事件的基本使用有以下几步骤&#xff1a; 使用v-on:xxx或xxx来绑定事件&#xff0c;其中xxx是事件的名称。在methods对象中配置事件的回调函数&…

Java巅峰之路---进阶篇---面向对象(三)

Java巅峰之路---进阶篇---面向对象&#xff08;三&#xff09; 抽象类和抽象方法抽象类和方法的介绍抽象类和抽象方法的注意事项小练习 接口接口的介绍接口的注意事项&#xff1a;小练习成员特点与接口的各类关系接口中成员的特点补充&#xff1a;JDK8与JDK9新特性 接口与类之间…

esp32 驱动st7735s 显示数字

图片 下一步把ascii 8*8点阵输入程序&#xff0c;屏幕就可以显示ascii字符了&#xff0c;最终把此显示程序写成函数&#xff0c;输入参数为要显示字符的数组&#xff0c;这样就是st7735的显示驱动程序了。当然还要加入显示自动换行功能。 至于怎样显示ascii&#xff0c;我想到…

美羊羊今天给你讲Python类、对象(包听懂)

在Python中&#xff0c;我们都知道class用于创建类&#xff0c;这都知道吧。有谁不知道&#xff0c;举手&#xff01;&#xff01;&#xff01; 好的&#xff0c;感谢各位的点赞和关注。 一.类是什么东西 类包含两个东西&#xff0c;一个是成员变量&#xff0c;一个是成员方法…

Java、python、php版 美发美甲预约服务平台 美容院管理系统(源码、调试、LW、开题、PPT)

&#x1f495;&#x1f495;作者&#xff1a;计算机源码社 &#x1f495;&#x1f495;个人简介&#xff1a;本人 八年开发经验&#xff0c;擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等&#xff0c;大家有这一块的问题可以一起交流&…

微信小程序引入unocss

今天刚新建一个微信小程序&#xff0c;之前写过一篇《原子化CSS&#xff1a;Unocss的使用》&#xff0c;想着“偷懒”不想定义各种css样式类&#xff0c;于是准备把unocss引入进来使用。 安装与配置 1.安装依赖 npm add -D unocss unocss-preset-weapp2.配置unocss.config.t…

必看!查快递接口怎么选?

历经十四年的技术沉淀与迭代&#xff0c;百递云API开放平台目前提供四种高效、稳定同时各具特点的快递信息查询API服务&#xff0c;以满足广大B端客户在不同业务场景下的物流信息查询需求。 对于新客户来说&#xff0c;可能会感到困惑&#xff0c;日常销售和运营团队也会遇到客…

数字化转型升级探索(二)

在数字化转型升级的探索中&#xff0c;我们计划通过整合前沿技术如人工智能、物联网和大数据&#xff0c;全面改造传统业务流程&#xff0c;打造智能化、数据驱动的业务架构&#xff0c;实现从数据采集、处理到分析的全链条数字化&#xff0c;以提升决策效率、优化运营管理&…

echarts组件——折线统计图

echarts组件——折线统计图 折线图&折线渐变图 组件代码 <template><div :class"classname" :style"{height:height,width:width}" /> </template><script> // 折线图&折线渐变图 import * as echarts from echarts re…

2024最全网络安全工程师面试题(附答案),金九银十找工作必看!

吉祥知识星球http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247485367&idx1&sn837891059c360ad60db7e9ac980a3321&chksmc0e47eebf793f7fdb8fcd7eed8ce29160cf79ba303b59858ba3a6660c6dac536774afb2a6330#rd 《网安面试指南》http://mp.weixin.qq.com/s…

版本控制工具git

版本控制工具 git 数据库 > 有代码历史版本 > 仓库 每个文件都是不同的历史版本&#xff0c;以便恢复 集中式版本控制系统 例如&#xff1a;SVN 缺陷&#xff1a; 1.依赖于中心服务器 分布式的版本管理系统 只有程序员用 git 只有需要在同步代码的时候需要联网 程…

Python运行时环境

1.1概念 程序运行只有栈帧不够&#xff0c;还要有进程与线程 Python在初始化时会创建一个主线程&#xff0c;所以其运行时环境中存在一个主线程&#xff0c;可以有多个线程 Python实现了对多线程的支持&#xff0c;而且一个线程就是操作系统上的一个原生线程 Python中所有线…

#Datawhale X 李宏毅苹果书 AI夏令营#1.2了解线性模型

1.2线性模型 什么是线性模型&#xff1f; 初始模型&#xff1a;, 其中y表示观看人数&#xff0c;x1表示前一天的观看人数&#xff0c;这个模型就是在用前一天的观看人数来预测当前的观看人数。 模型改进&#xff1a; 然而真实的数据是有周期性的&#xff0c;每隔7天&#…

向量数据库Milvus源码开发贡献实践

Milvus 是一款云原生的开源向量数据库&#xff0c;广泛应用于高维向量数据的管理和人工智能驱动的相似性搜索。无论是在构建智能搜索引擎还是开发数据驱动的应用&#xff0c;Milvus 都能提供强大的支持。我们将一起从头开始实践 Milvus 的标准开发流程&#xff0c;包括如何搭建…

企业画册在线版是怎么制作的?

随着互联网技术的飞速发展&#xff0c;传统的纸质企业画册已经逐渐无法满足现代企业的需求。为了让画册更加环保、便捷&#xff0c;同时提升企业形象和品牌影响力&#xff0c;企业画册在线版应运而生。那么&#xff0c;企业画册在线版究竟是如何制作出来的呢&#xff1f;今天&a…

嵌入式学习(数据库)

数据库的定义&#xff1a; 可以理解为数据库是用来存放数据的一个容器。有了数据库后&#xff0c;我们可以直接查找数据。或者可以对数据库进行读写删除等操作。 Sqlite 小型数据库 . Sqlite特点: 可以实现大数据量的管理 读写速度慢 最常见的数据库类型是关系型数据库管理…

QLU-AI助手初次微调Qwen2-7B-Instruct总结

一、微调代码 from datasets import Dataset import pandas as pd from transformers import (AutoTokenizer,AutoModelForCausalLM,DataCollatorForSeq2Seq,TrainingArguments,Trainer,GenerationConfig) import torch from peft import LoraConfig, TaskType, get_peft_mode…

探索待办事项管理新世界:10款工具带你告别杂乱无章

国内外主流的10款免费待办事项app对比&#xff1a;1.PingCode&#xff1b;2.Worktile&#xff1b;3.Todoist&#xff1b;4.Trello&#xff1b;5.Habitica&#xff1b;6.Forest&#xff1b;7.Teambition&#xff1b;8.Asana&#xff1b;9.嘀嗒清单&#xff08;TickTick&#xff…

poe供电原理以及应用

1,根据IEEE802.3af标准,一个完整的PoE系统包括供电端设备PSE和受电端设备PD两部分; 供电设备PSE是整个系统的电源提供者,为PD设备提供直流电源,其可分为M