谷粒商城实战笔记-71-商品服务-API-属性分组-前端组件抽取父子组件交互

文章目录

  • 一,一次性创建所有的菜单
  • 二,开发属性分组界面
    • 1,左侧三级分类树形组件
    • 2,右侧分组列表
    • 3,左右两部分通信
      • 3.1 子组件发送数据
      • 3.2,父组件接收数据
  • Vue的父子组件通信
    • 父组件向子组件传递数据
    • 子组件向父组件传递数据
  • category.vue组件完整代码
  • attrgroup.vue完整代码

一,一次性创建所有的菜单

创建菜单的工作非常简单,在页面上操作即可,是重复性的工作。为了避免重复的工作,使用脚本一次性创建所有的菜单。

在这里插入图片描述

二,开发属性分组界面

属性分组界面由左右两个部分构成,左侧是三级分类树,右侧是每个分类关联的分组列表,这种布局可以用Layout布局组件来实现。

  <el-row :gutter="20"><el-col :span="6">左侧三级分类树形布局</el-col><el-col :span="18">右侧分组列表</el-col></el-row>

1,左侧三级分类树形组件

将左侧三级分类的展示抽象为一个组件,名为category.vue,放在views/modules/common下。

在这里插入图片描述

2,右侧分组列表

这部分使用了el-formel-table组件。

3,左右两部分通信

现在的交互需求是左侧点击了某个分类,右侧要查询这个分类所属的所有分组,左右两边要联动。

难点是左侧是一个组件,定义在组件文件中。

这种情况下,就需要使用vue的父子组件通信机制。

子组件向父组件:通过触发自定义事件,并在父组件中监听这些事件来传递数据。

3.1 子组件发送数据

首先,在category.vue组件中注册结点点击事件。

在这里插入图片描述

在响应事件中使用$.emit向父组件发送数据。

在这里插入图片描述

this.$emit 方法被用来触发一个自定义事件,第一个参数是自定义事件的名称,这里是tree-node-click,父组件在使用子组件时,要通过给这个事件注册响应函数来获取子组件发送的数据。

理解这点非常重要。
理解这点非常重要。
理解这点非常重要。

3.2,父组件接收数据

父组件使用子组件时绑定一个接收数据的事件。

在这里插入图片描述

在这个事件响应函数中处理子组件传递的数据。

	treenodeclick(data, node, component) {if (node.level == 3) {this.catId = data.catId;this.getDataList(); //重新查询}},

Vue的父子组件通信

Vue.js 中的父子组件通信是构建复杂应用的基础之一。Vue 提供了多种方式来实现父子组件之间的数据传递。下面我将分别介绍父组件向子组件传递数据以及子组件向父组件传递数据的方法。

父组件向子组件传递数据

父组件向子组件传递数据最常用的方式是通过 props。这是 Vue 的单向数据流模型的一部分,确保了数据流动的方向明确且易于追踪。

  • 定义 Props:在子组件中定义接收父组件传递的数据的属性(props)。

    export default {props: ['message'],
    }
    
  • 传递 Props:在父组件中使用 <child-component> 标签,并通过属性绑定的方式传递数据。

    <template><div><child-component :message="parentMessage" /></div>
    </template><script>
    import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},data() {return {parentMessage: 'Hello from parent',};},
    };
    </script>
    

子组件向父组件传递数据

子组件可以通过自定义事件的方式向父组件发送数据。这通常涉及到 v-on 或者 @ 指令以及 $emit 方法。

  • 触发事件:在子组件内部使用 $emit 方法触发自定义事件,并传递数据。

    methods: {sendMessageToParent() {this.$emit('send-message', 'Hello from child');},
    }
    
  • 监听事件:在父组件中监听子组件触发的事件,并处理传递过来的数据。

    <template><div><child-component @send-message="handleMessageFromChild" /></div>
    </template><script>
    import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent,},methods: {handleMessageFromChild(message) {console.log('Received message:', message);},},
    };
    </script>
    
  • 父组件向子组件:通过 props 传递数据。

  • 子组件向父组件:通过触发自定义事件,并在父组件中监听这些事件来传递数据。

category.vue组件完整代码

<template><div><el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input><el-tree:data="menus":props="defaultProps"node-key="catId"ref="menuTree"@node-click="nodeclick":filter-node-method="filterNode":highlight-current = "true"></el-tree></div>
</template><script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';export default {//import引入的组件需要注入到对象中才能使用components: {},props: {},data() {//这里存放数据return {filterText: "",menus: [],expandedKey: [],defaultProps: {children: "children",label: "name"}};},//计算属性 类似于data概念computed: {},//监控data中的数据变化watch: {filterText(val) {this.$refs.menuTree.filter(val);}},//方法集合methods: {//树节点过滤filterNode(value, data) {if (!value) return true;return data.name.indexOf(value) !== -1;},getMenus() {this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get"}).then(({ data }) => {this.menus = data.data;});},nodeclick(data, node, component) {console.log("子组件category的节点被点击", data, node, component);//向父组件发送事件;this.$emit("tree-node-click", data, node, component);}},//生命周期 - 创建完成(可以访问当前this实例)created() {this.getMenus();},//生命周期 - 挂载完成(可以访问DOM元素)mounted() {},beforeCreate() {}, //生命周期 - 创建之前beforeMount() {}, //生命周期 - 挂载之前beforeUpdate() {}, //生命周期 - 更新之前updated() {}, //生命周期 - 更新之后beforeDestroy() {}, //生命周期 - 销毁之前destroyed() {}, //生命周期 - 销毁完成activated() {} //如果页面有keep-alive缓存功能,这个函数会触发
};
</script>
<style scoped></style>

attrgroup.vue完整代码

<template><el-row :gutter="20"><el-col :span="6"><category @tree-node-click="treenodeclick"></category></el-col><el-col :span="18"><div class="mod-config"><el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"><el-form-item><el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input></el-form-item><el-form-item><el-button @click="getDataList()">查询</el-button><el-button type="success" @click="getAllDataList()">查询全部</el-button><el-buttonv-if="isAuth('product:attrgroup:save')"type="primary"@click="addOrUpdateHandle()">新增</el-button><el-buttonv-if="isAuth('product:attrgroup:delete')"type="danger"@click="deleteHandle()":disabled="dataListSelections.length <= 0">批量删除</el-button></el-form-item></el-form><el-table:data="dataList"borderv-loading="dataListLoading"@selection-change="selectionChangeHandle"style="width: 100%;"><el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column><el-table-column prop="attrGroupId" header-align="center" align="center" label="分组id"></el-table-column><el-table-column prop="attrGroupName" header-align="center" align="center" label="组名"></el-table-column><el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column><el-table-column prop="descript" header-align="center" align="center" label="描述"></el-table-column><el-table-column prop="icon" header-align="center" align="center" label="组图标"></el-table-column><el-table-column prop="catelogId" header-align="center" align="center" label="所属分类id"></el-table-column><el-table-columnfixed="right"header-align="center"align="center"width="150"label="操作"><template slot-scope="scope"><el-button type="text" size="small" @click="relationHandle(scope.row.attrGroupId)">关联</el-button><el-buttontype="text"size="small"@click="addOrUpdateHandle(scope.row.attrGroupId)">修改</el-button><el-button type="text" size="small" @click="deleteHandle(scope.row.attrGroupId)">删除</el-button></template></el-table-column></el-table><el-pagination@size-change="sizeChangeHandle"@current-change="currentChangeHandle":current-page="pageIndex":page-sizes="[10, 20, 50, 100]":page-size="pageSize":total="totalPage"layout="total, sizes, prev, pager, next, jumper"></el-pagination><!-- 弹窗, 新增 / 修改 --><add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update><!-- 修改关联关系 --><relation-update v-if="relationVisible" ref="relationUpdate" @refreshData="getDataList"></relation-update></div></el-col></el-row>
</template><script>
/*** 父子组件传递数据* 1)、子组件给父组件传递数据,事件机制;*    子组件给父组件发送一个事件,携带上数据。* // this.$emit("事件名",携带的数据...)*/
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》';
import Category from "../common/category";
import AddOrUpdate from "./attrgroup-add-or-update";
import RelationUpdate from "./attr-group-relation";
export default {//import引入的组件需要注入到对象中才能使用components: { Category, AddOrUpdate, RelationUpdate },props: {},data() {return {catId: 0,dataForm: {key: ""},dataList: [],pageIndex: 1,pageSize: 10,totalPage: 0,dataListLoading: false,dataListSelections: [],addOrUpdateVisible: false,relationVisible: false};},activated() {this.getDataList();},methods: {//处理分组与属性的关联relationHandle(groupId) {this.relationVisible = true;this.$nextTick(() => {this.$refs.relationUpdate.init(groupId);});},//感知树节点被点击treenodeclick(data, node, component) {if (node.level == 3) {this.catId = data.catId;this.getDataList(); //重新查询}},getAllDataList(){this.catId = 0;this.getDataList();},// 获取数据列表getDataList() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl(`/product/attrgroup/list/${this.catId}`),method: "get",params: this.$http.adornParams({page: this.pageIndex,limit: this.pageSize,key: this.dataForm.key})}).then(({ data }) => {if (data && data.code === 0) {this.dataList = data.page.list;this.totalPage = data.page.totalCount;} else {this.dataList = [];this.totalPage = 0;}this.dataListLoading = false;});},// 每页数sizeChangeHandle(val) {this.pageSize = val;this.pageIndex = 1;this.getDataList();},// 当前页currentChangeHandle(val) {this.pageIndex = val;this.getDataList();},// 多选selectionChangeHandle(val) {this.dataListSelections = val;},// 新增 / 修改addOrUpdateHandle(id) {this.addOrUpdateVisible = true;this.$nextTick(() => {this.$refs.addOrUpdate.init(id);});},// 删除deleteHandle(id) {var ids = id? [id]: this.dataListSelections.map(item => {return item.attrGroupId;});this.$confirm(`确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,"提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {this.$http({url: this.$http.adornUrl("/product/attrgroup/delete"),method: "post",data: this.$http.adornData(ids, false)}).then(({ data }) => {if (data && data.code === 0) {this.$message({message: "操作成功",type: "success",duration: 1500,onClose: () => {this.getDataList();}});} else {this.$message.error(data.msg);}});});}}
};
</script>
<style scoped>
</style>

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

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

相关文章

vector的相关内容介绍及模拟实现

一.内容介绍 1.vector是一个模板&#xff0c;不支持流插入和流提取&#xff0c;因为它支持多种方式的输出&#xff0c;不需要局限于流提取的方式 2.关于vector所涉及的函数接口与string类的用法类似&#xff0c;有兴趣可参考小编的另一篇博客 3.vector的迭代器失效问题 1&g…

后端面试题日常练-day08 【Java基础】

题目 希望这些选择题能够帮助您进行后端面试的准备&#xff0c;答案在文末 Java中的静态变量和实例变量有何区别&#xff1f; a) 静态变量属于类&#xff0c;实例变量属于对象 b) 静态变量只能在静态方法中访问&#xff0c;实例变量只能在实例方法中访问 c) 静态变量在类加载时…

【BUG】已解决:The above exception was the direct cause of the following exception:

The above exception was the direct cause of the following exception: 目录 The above exception was the direct cause of the following exception: 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c…

【杰理蓝牙开发】AC695x 音频部分

本文主要记录 杰理蓝牙audio接口的使用&#xff0c;包括ADC和DAC原理的介绍和API接口的使用。 【杰理蓝牙开发】AC695x 音频部分 0. 个人简介 && 授权须知1. ADC【音频数据采集】硬件部分1.1 单片机引脚1.2 硬件电路设计1.3 MIC 输入通路解释 2. 【DAC】音频信号编解码…

JVM 高级面试题及答案整理,最新面试题

JVM中的垃圾收集器有哪些,它们的工作原理是什么? JVM中的垃圾收集器主要包括以下几种: 1、 Serial收集器:它是一个单线程收集器,工作时会暂停所有其他工作线程("Stop-The-World"),它的优点是简单高效(与其他收集器的单线程比),适用于单核处理器的环境。 2…

stm32F1xx外设GPIO的用法总结

目录 前言一、概念二、主要文件三、库函数和寄存器四、几个数据结构五、使用方式 前言 本文笔记总结stm32F1xx的GPIO的寄存器说明和标准库中的函数说明、用法&#xff0c;使用案例; 一、概念 GPIO为通用输入输出端口的简称&#xff0c;作为主控芯片的一个外设在芯片中是一个…

Super 4PCS配准算法

Nicolas Mellado&#xff0c;CNRS&#xff08;Centre national de la recherche scientifique&#xff0c;法国国家科学研究中心&#xff09;的研究员&#xff0c;在IRIT&#xff08;Institut de Recherche en Informatique de Toulouse&#xff0c;图卢兹计算机科学研究所&…

SAPUI5基础知识20 - 对话框和碎片(Dialogs and Fragments)

1. 背景 在 SAPUI5 中&#xff0c;Fragments 是一种轻量级的 UI 组件&#xff0c;类似于视图&#xff08;Views&#xff09;&#xff0c;但它们没有自己的控制器&#xff08;Controller&#xff09;。Fragments 通常用于定义可以在多个视图中重用的 UI 片段&#xff0c;从而提…

linux系统安装pytorch_中文地址命名实体识别案例

命名实体有关文章参考这篇文章 中文地址命名实体识别训练和预测 win10系统安装cuda环境参考这篇文章 搭建Pytorch的GPU环境超详细 1、下载python https://www.python.org/downloads/release/python-368/ 2、下载python包 https://pypi.org/search/?q=transformers 1、搜…

如何录制电脑内部声音?全方位介绍电脑录音软件:8款在线录音!(2024重新整理)

如何录制电脑内部声音&#xff1f;不管是娱乐圈还是现实生活&#xff0c;【录音】这个功能的重要性不言而喻。而电脑录音已在影视配音、音视频剪辑、会议记录、在线教育等多个领域发光发热&#xff01; 本文将为您推荐8款电脑录音软件&#xff0c;并详细介绍电脑录音的多种方式…

Git 从入门到精通:全面掌握版本控制(IntelliJ IDEA 中 Git 的使用指南)

引言 Git 是目前世界上最流行的版本控制系统&#xff0c;由 Linux 内核的创始人 Linus Torvalds 开发。它不仅拥有强大的分支管理功能&#xff0c;还具备了优秀的合并能力。本文将从 Git 的基本概念开始&#xff0c;逐步深入到 Git 的使用和一些高级技巧。 Git 简介 Git 是一…

Python番外篇:变量是盒子还是标签

引言 前面通过几十篇文章&#xff0c;大概把Python的一些比较实用的基础做了一些介绍&#xff0c;学会这些&#xff0c;基本能应付日常的小的需求开发了&#xff0c;写一些小工具&#xff0c;提高工作的处理效率。 接下来&#xff0c;准备开始进入一个新的篇章&#xff0c;也…

del 语句

使用 del 语句可以删除任何对象&#xff0c;包括字典对象。删除之后&#xff0c;之前的引用将失效&#xff0c;尝试使用该对象会导致 NameError 错误。因此&#xff0c;删除字典对象的命令是 del myDict。 元组 (Tuple) 元组是不可变的&#xff0c;因此你不能修改元组的内容&a…

C#如何引用dll动态链接库文件的注释

1、dll动态库文件项目生成属性中要勾选“XML文档文件” 注意&#xff1a;XML文件的名字切勿修改。 2、添加引用时XML文件要与DLL文件在同一个目录下。 3、如果要是添加引用的时候XML不在相同目录下&#xff0c;之后又将XML文件复制到相同的目录下&#xff0c;需要删除引用&am…

MySQL之索引优化

1、在进行查询时&#xff0c;索引列不能是表达式的一部分&#xff0c;也不能是函数的参数&#xff0c;否则无法使用索引 例如下面的查询不能使用 actor_id 列的索引&#xff1a; #这是错误的 SELECT actor_id FROM sakila.actor WHERE actor_id 1 5; 优化方式&#xff1a;…

微信小程序安装vant组件库和使用

第一步打开终端输入 npm install vant/weapp --save 第二步 npm cache clean --force 第三步 npm i vant/weapp -S --production 第四步在app.json中的usingComponents输入 "van-button": "vant/weapp/button/index" 第五步直接在页面使用 <v…

SSM(Spring + Spring MVC + MyBatis)框架面试三道题

以下是三道关于SSM&#xff08;Spring Spring MVC MyBatis&#xff09;框架的面试题&#xff0c;由简单到困难进行排列&#xff1a; 1. 简答题&#xff1a;请简述Spring框架的核心特性。 答案&#xff1a; Spring框架的核心特性主要包括以下几个方面&#xff1a; 控制反转…

当设计模式牵手LLM

模版方法模式 何为模版设计模式 想象一下 如果我们要泡一杯茶 我们要循序渐进地 煮水温杯注水浸茶茶水入杯加点配料 如此&#xff0c;泡茶的工序就完成了&#xff0c;那么模板方法模式&#xff0c;相信各位也有了一定的概念&#xff1a;定义了一个算法的骨架&#xff0c;而…

UDP的报文结构及其注意事项

1. 概述 UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接的传输层协议&#xff0c;它提供了一种简单的数据传输服务&#xff0c;不保证数据的可靠传输。在网络通信中&#xff0c;UDP通常用于一些对实时性要求较高、数据量较小、传输延迟较低的应用&#xff0c…

创建一个程序来记录每天的工作日常—6。与chatgpt结合 找一些集 来训练 ,它能自动分类到 其中一个,例如 “打扫卫生” 它会自动分类到 “家务”

改进步骤 数据增强&#xff1a;使用GPT模型生成更多的训练数据。使用更高级的模型&#xff1a;使用BERT或其他预训练的语言模型进行文本分类。经验条和经验值显示&#xff1a;在网页端显示当前的经验值&#xff0c;并添加一个经验条。 数据增强和训练数据集 我们可以通过Ope…