this._uid：Vue 内部为每个组件实例分配的唯一 ID

于 2025-04-22 18:24:16 发布
阅读量372 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/RumbleWx/article/details/147427803

Vue 提供了一些方法可以帮助你区分组件实例，例如通过 this._uid（Vue 内部为每个组件实例分配的唯一 ID）或自定义标识符。

以下是具体的实现步骤和代码示例：

 console.log("当前组件实例ID:", this._uid, "时间戳:", new Date().toISOString());

Tsinkaη
关注
【Vue】Vue3.5 新特性
小秀的博客
09-04 1029
useTemplateRef 是对 ref 对 dom 获取或者组件实例的一个改动，以便区分使用 ref 获取响应式数据和 dom。
Vue组件(一)从CountUp.js 组件谈Vue中如何封装组件封装
qq_40547061的博客
04-20 1151
本文主要从数字渐变组件谈第三方JS库的使用 1.组件封装基础 1.1准备阶段 在views文件夹下新建count-to页面 在路由中进行配置 { path: '/count-to', name: 'count-to', component: () => import('@/views/count-to.vue') }, 组件封装需要放在components文件夹...
Vue中你忽略的点
izhaong
05-17 1263
自定义组件使用 v-model <my-component v-model="data"></my-component> 在组件my-component中，通过this.$emit(‘input’)就可以改变data的值了。 this._uid <div :id="eleId"></div> <script> computed: { ...
vue生成唯一id
萍踪侠影
11-17 7551
注意：需要声明一个字符串来接受这个生成的唯一id createUniqueId(n) { n = 1; // 生成一个唯一id，包含数字和字母 var random = function() { // 生成10-12位不等的字符串 return Number( Math.random() .to...
前端生成唯一GUID，生成32位唯一标识码
qq_42780323的博客
07-09 3127
方法很简单，使用函数如下： functionguid(){ return'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,function(c){ varr=Math.random()*16|0, v=c=='x'?r:(r&0x3|0x8); returnv.toString...
在vue中生成唯一id用于v-for:key 可以用Random（）产生吗？
昔人'
10-10 2591
在vue中生成唯一id用于v-for:key 使用Math.random()
vue组件唯一的id
11-22
Vue组件通常并没有内置的方式来生成唯一的ID，但是我们可以通过自定义的方式来为每个组件添加一个唯一标识符。这通常是通过`v-if`、`v-for`指令结合计数器或者是数据属性来实现的。例如： ```html (item, index) ...
Vue实例的源码解析 (实例一)
qq_44999678的博客
08-16 3460
Vue实例的源码解析 接下来我将用两个例子来讲解一个vm实例从无到有再到渲染页面的过程，可能比较复杂，望君能沉静下来。 这里只讨论了关于实例的创建以及虚拟节点的创建和挂载部分，并没有讨论生成实例后的数据处理部分。关于数据处理部分我会在后续的文章中详细介绍。 示例一： 示例一的代码如下： <body> <div id="app"> <span>{{message}}</span> </div> <scri
Vue 源码解析（一）：依赖收集（Observer，Dep与Watcher对象）
Czuaphe的博客
05-25 1527
Vue 实例新建流程 Vue源码目录结构说明 src compiler 解析模板生成AST和render函数 core components 目前只有keep-alive组件 global-api 向Vue对象注入全局方法：Vue.use()，Vue.extend()等 instance 向Vue实例对象注入方法：this.$emit(),this.$forceUpdate()等 observer 实现data与Watch对象的依赖收集与更新 util 工具类 vdom Vdom有关方法 entr
<template> <div class="page-container"> <el-row :gutter="20"> <!-- 查询区域 --> <div class="search-wrapper"> <el-form :inline="true" label-width="100px" @submit.prevent="getList"> <el-form-item label="名称"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable/> </el-form-item> <el-form-item label="责任人"> <el-input v-model="queryParams.respPerson" placeholder="请输入责任人" clearable/> </el-form-item> <el-form-item> <el-button type="primary" @click="getList">查询</el-button> <el-button @click="resetQuery">重置</el-button> <el-button type="primary" @click="toggleGantt" style="margin-left: 10px;" > {{ showGantt ? '收起甘特图' : '展开甘特图' }} </el-button> </el-form-item> </el-form> </div> <div class="table-container"> <el-table ref="table" :data="listData" row-key="uid" border :row-style="{ height: '30px' }" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @row-click="handleRowClick" @expand-change="handleExpandChange" highlight-current-row > <el-table-column prop="code" label="编号" width="120"/> <el-table-column prop="name" label="名称" min-width="180"/> <el-table-column prop="respPerson" label="责任人" width="120"/> <el-table-column prop="schedule" label="完成百分比" width="120"> <template slot-scope="{row}"> <el-progress :percentage="Number(row.schedule)" :show-text="row.schedule > 10" :stroke-width="18" :color="getProgressColor(row.schedule)" /> </template> </el-table-column> <el-table-column prop="planStartDate" label="计划开始日期" width="150"/> <el-table-column prop="planEndDate" label="计划结束日期" width="150"/> <!-- 新增甘特图列 --> <el-table-column label="时间线" min-width="300"> <template slot-scope="{row}"> <div class="gantt-cell" :ref="'gantt_'+row.uid" style="height: 50px;"></div> </template> </el-table-column> <!-- <el-table-column label="操作" width="100">--> <!-- <template slot-scope="scope">--> <!-- <el-button size="mini" icon="el-icon-view" @click.stop="handleUpdate(scope.row)">查看</el-button>--> <!-- </template>--> <!-- </el-table-column>--> </el-table> </div> <!-- <!– 右侧甘特图容器 –>--> <!-- <el-col v-if="showGantt" :span="12">--> <!-- <div ref="ganttContainer" class="gantt-container" style="width: 100%; height: 600px;"></div>--> <!-- </el-col>--> </el-row> <!-- 查看弹窗 --> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px" :disabled="disable"> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="code"> <el-input v-model="form.code" placeholder="请输入编号"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="备注" prop="remarks"> <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" rows="3"/> </el-form-item> </el-col> </el-row> <div class="dialog-footer"> <el-button @click="cancel">取 消</el-button> </div> </el-form> </el-dialog> </div> </template> <script> import gantt from 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; import {getPlan, listPlan} from '@/api/dw/plan/planview'; export default { name: 'Planview', data() { return { expandedKeys: new Set(), // 存储所有展开节点的UID listData: [], total: 0, queryParams: { pageNum: 1, pageSize: 1000, // 树形结构不适合分页，增加单页大小 name: null, respPerson: null }, open: false, title: '', form: {}, rules: { name: [{required: true, message: '名称不能为空', trigger: 'blur'}], schedule: [ {required: true, message: '完成百分比不能为空', trigger: 'blur'}, {type: 'number', message: '输入内容不是有效的数字', trigger: 'blur'} ] }, disable: true, showGantt: true, // 控制甘特图显示 flatData: [], // 扁平化数据 ganttInitialized: false, // 甘特图初始化标志 currentSelectedTask: null, // 当前选中的任务ID ganttExpandState: new Map() // 存储甘特图的展开状态 }; }, mounted() { this.getList(); }, methods: { // 初始化单个任务的甘特图 initTaskGantt(row) { const container = this.$refs[`gantt_${row.uid}`]?.[0]; if (!container || container._ganttInitialized) return; // 创建独立的甘特图实例 const taskGantt = gantt.createGanttInstance(); taskGantt.config.show_chart = false; taskGantt.config.show_grid = false; taskGantt.config.scale_height = 0; taskGantt.config.readonly = true; // 配置时间轴 taskGantt.config.scales = [ {unit: "day", step: 1, format: "%j %D"} ]; // 设置时间范围 const start = new Date(row.planStartDate); const end = new Date(row.planEndDate); taskGantt.setWorkTime({start_date: start, end_date: end}); // 添加任务 taskGantt.parse({ data: [{ id: row.uid, text: row.name, start_date: row.planStartDate, end_date: row.planEndDate, progress: row.schedule / 100, duration: this.calculateDuration(row.planStartDate, row.planEndDate) }] }); // 初始化甘特图 taskGantt.init(container); container._ganttInstance = taskGantt; container._ganttInitialized = true; }, // 计算任务持续时间（天） calculateDuration(start, end) { const startDate = new Date(start); const endDate = new Date(end); return Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24)); }, // 获取进度条颜色 getProgressColor(percentage) { // if (percentage < 30) return '#F56C6C'; // if (percentage < 70) return '#E6A23C'; return '#67C23A'; }, // 初始化甘特图 initGantt() { if (!this.$refs.ganttContainer) return; try { // 清除之前的实例（如果存在） if (gantt.$container) { gantt.destructor(); } gantt.config.date_format = '%Y-%m-%d'; gantt.config.scale_unit = 'month'; gantt.config.step = 1; gantt.config.subscales = [ {unit: 'day', step: 1, date: '%j, %D'} ]; gantt.config.columns = [ {name: 'text', label: '任务名称', tree: true, width: 200}, {name: 'start_date', label: '开始时间', align: 'center', width: 100}, {name: 'end_date', label: '结束时间', align: 'center', width: 100}, {name: 'progress', label: '进度', align: 'center', width: 80, template: (task) => `${task.progress * 100}%`} ]; gantt.config.row_height = 30; gantt.config.grid_width = 500; gantt.templates.task_text = (start, end, task) => task.text; gantt.init(this.$refs.ganttContainer); // 绑定事件 gantt.attachEvent('onTaskSelected', (id) => { this.currentSelectedTask = id; this.scrollToTableRow(id); }); // 绑定展开/折叠事件 gantt.attachEvent('onAfterTaskOpen', (id) => { this.ganttExpandState.set(id, true); this.syncGanttExpandToTable(id, true); }); gantt.attachEvent('onAfterTaskClose', (id) => { this.ganttExpandState.set(id, false); this.syncGanttExpandToTable(id, false); }); this.ganttInitialized = true; console.log('甘特图初始化成功'); } catch (e) { console.error('甘特图初始化失败:', e); } }, // 将甘特图的展开状态同步到表格 syncGanttExpandToTable(taskId, expanded) { const row = this.flatData.find(item => item.uid === taskId); if (!row) return; // 更新展开状态 if (expanded) { this.expandedKeys.add(row.uid); } else { this.expandedKeys.delete(row.uid); } // 更新表格UI this.$nextTick(() => { const tableRow = this.$refs.table.$el.querySelector(`[data-id="${row.uid}"]`); if (tableRow) { const expandIcon = tableRow.querySelector('.el-table__expand-icon'); if (expandIcon) { const isExpanded = expandIcon.classList.contains('el-table__expand-icon--expanded'); if (isExpanded !== expanded) { this.$refs.table.toggleRowExpansion(row, expanded); } } } }); }, // 获取数据 async getList() { try { const res = await listPlan(this.queryParams); this.listData = this.handleTree(res.data, 'uid', 'parentUid'); this.$nextTick(() => { // 初始化所有可见行的甘特图 this.initVisibleGantts(); }); } catch (error) { console.error('获取数据失败:', error); } }, // 初始化所有可见行的甘特图 initVisibleGantts() { this.listData.forEach(item => { this.initTaskGantt(item); if (item.children) { item.children.forEach(child => this.initTaskGantt(child)); } }); }, // 更新甘特图数据 updateGantt() { if (!this.ganttInitialized) return; const tasks = this.getVisibleTasks(); console.log('更新甘特图任务数量:', tasks.length); try { // 保存当前甘特图的展开状态 this.saveGanttExpandState(); gantt.clearAll(); gantt.parse({data: tasks, links: []}); // 恢复甘特图的展开状态 this.restoreGanttExpandState(); this.adjustGanttView(tasks); } catch (e) { console.error('更新甘特图失败:', e); } }, // 保存甘特图的展开状态 saveGanttExpandState() { if (!this.flatData.length) return; // 遍历所有任务，保存展开状态 this.flatData.forEach(item => { if (gantt.isTaskExists(item.uid)) { this.ganttExpandState.set(item.uid, gantt.isTaskOpen(item.uid)); } }); }, // 恢复甘特图的展开状态 restoreGanttExpandState() { this.ganttExpandState.forEach((isOpen, taskId) => { if (gantt.isTaskExists(taskId)) { gantt.openTask(taskId, isOpen); } }); }, // 获取当前可见的任务（根据展开状态） getVisibleTasks() { const visibleTasks = []; const collectVisible = (nodes) => { nodes.forEach(node => { visibleTasks.push({ id: node.uid, text: node.name, start_date: node.planStartDate, duration: node.planDuration || 1, progress: (node.schedule || 0) / 100, parent: node.parentUid || 0, open: this.expandedKeys.has(node.uid) // 设置初始展开状态 }); // 如果节点是展开的，递归收集子节点 if (this.expandedKeys.has(node.uid) && node.children) { collectVisible(node.children); } }); }; collectVisible(this.listData); return visibleTasks; }, // 自动调整甘特图视图 adjustGanttView(tasks) { if (!tasks.length) return; // 计算时间范围 const dates = tasks .filter(t => t.start_date) .map(t => new Date(t.start_date)); if (!dates.length) return; const minDate = new Date(Math.min(...dates.map(d => d.getTime()))); const maxDate = new Date(Math.max(...dates.map(t => { const endDate = new Date(t.start_date); endDate.setDate(endDate.getDate() + (t.duration || 0)); return endDate.getTime(); }))); // 设置时间范围 gantt.setWorkTime({ start_date: minDate, end_date: maxDate }); // 根据时间跨度调整缩放级别 const timeDiffInDays = Math.ceil((maxDate - minDate) / (1000 * 60 * 60 * 24)); if (timeDiffInDays <= 7) { gantt.config.scale_unit = 'day'; gantt.config.step = 1; } else if (timeDiffInDays <= 31) { gantt.config.scale_unit = 'week'; gantt.config.step = 1; } else if (timeDiffInDays <= 365) { gantt.config.scale_unit = 'month'; gantt.config.step = 1; } else { gantt.config.scale_unit = 'year'; gantt.config.step = 1; } gantt.render(); }, // 处理树形结构 handleTree(data, idKey = 'uid', parentKey = 'parentUid') { const map = {}; const tree = []; // 创建映射 data.forEach(item => { map[item[idKey]] = {...item, children: []}; }); // 构建树 data.forEach(item => { const parentId = item[parentKey]; if (parentId && map[parentId]) { map[parentId].children.push(map[item[idKey]]); } else { tree.push(map[item[idKey]]); } }); return tree; }, // 行点击事件 handleRowClick(row) { this.$nextTick(() => { // 高亮当前行 this.$refs.table.setCurrentRow(row); // 在甘特图中选中对应任务 if (this.ganttInitialized) { gantt.selectTask(row.uid); gantt.showTask(row.uid); } }); }, // 滚动到表格行 scrollToTableRow(taskId) { const row = this.flatData.find(item => item.uid === taskId); if (!row) return; this.$nextTick(() => { // 确保所有父节点都展开 this.expandParents(row); // 高亮当前行 this.$refs.table.setCurrentRow(row); // 滚动到元素 const tableBody = this.$refs.table.$el.querySelector('.el-table__body-wrapper'); const rowEl = this.$refs.table.$el.querySelector(`[data-id="${row.uid}"]`); if (tableBody && rowEl) { const rowTop = rowEl.offsetTop; const tableHeight = tableBody.clientHeight; tableBody.scrollTop = rowTop - tableHeight / 2; } }); }, // 展开父节点 expandParents(row) { if (!row.parentUid) return; const parent = this.flatData.find(item => item.uid === row.parentUid); if (parent && !this.expandedKeys.has(parent.uid)) { this.expandedKeys.add(parent.uid); this.$refs.table.toggleRowExpansion(parent, true); this.expandParents(parent); } }, // 树展开/折叠更新甘特图 handleExpandChange(row, expanded) { if (expanded && row.children) { this.$nextTick(() => { row.children.forEach(child => this.initTaskGantt(child)); }); } }, // 递归折叠子节点 collapseChildren(node) { if (node.children && node.children.length) { node.children.forEach(child => { this.expandedKeys.delete(child.uid); this.$refs.table.toggleRowExpansion(child, false); this.collapseChildren(child); }); } }, // 切换甘特图显示 - 解决重新初始化问题 toggleGantt() { this.showGantt = !this.showGantt; if (this.showGantt) { this.$nextTick(() => { // 确保每次展开都重新初始化甘特图 this.ganttInitialized = false; this.initGantt(); this.updateGantt(); }); } }, // 获取数据详情 async handleUpdate(row) { try { const res = await getPlan(row.uid); this.form = res.data; this.open = true; this.title = '查看治理计划'; } catch (error) { console.error('获取详情失败:', error); } }, // 取消按钮 cancel() { this.open = false; }, // 重置查询 resetQuery() { this.queryParams = { pageNum: 1, pageSize: 1000, name: null, respPerson: null }; this.getList(); } } }; </script> <style scoped> .page-container { padding: 20px; background-color: #f5f7fa; } .search-wrapper { background-color: #fff; padding: 15px 20px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); margin-bottom: 20px; } .table-container { background-color: #fff; padding: 15px; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } .gantt-container { background-color: #fff; border-radius: 4px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); padding: 5px; } .dialog-footer { text-align: right; margin-top: 20px; } .toggle-button { margin-bottom: 15px; } .el-table { width: 100%; } .el-table--border { border: 1px solid #ebeef5; } .el-table__row:hover { background-color: #f5f7fa !important; } .el-progress { margin-top: 8px; } .el-form-item { margin-bottom: 18px; } </style> 优化后的代码，甘特图时间线列没有数据是怎么回事
最新发布
07-24
因此，如果使用的是社区版，我们需要换一种方式：为每个任务创建一个新的甘特图实例，但要注意避免冲突。 如果社区版不支持多实例，那么我们需要使用其他库或自己绘制简单的甘特条。 考虑到性能和多实例的问题，...
vue-unique-id:Vue.js的组件和HTML唯一ID生成插件
05-06
唯一身份 Vue.js插件，可生成组件范围HTML标识符以用于表单输入，标签，jQuery插件等。这解决了在创建可重复使用的Vue组件时可为DOM元素生成唯一HTML ID的问题，该组件可在页面中多次实例化。 。 另外，此插件还会为每个Vue.js组件生成一个唯一的id属性（默认情况下为uid ）。 该插件没有外部依赖性。 安装 通过 $ npm install vue-unique-id 然后配置： import UniqueId from 'vue-unique-id' ; // or const UniqueId = require ( 'vue-unique-id' ) ; Vue . use ( UniqueId ) ; 例子 唯一组件标识符 每个Vue组件都有一个唯一的uid属性。 const MyComponent = { created ( ) { c
Vue前端生成UUID
IT小辉同学
07-17 6637
守住着你的每个日出清晨到黄昏！！！
前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）
IT1995的博客
08-08 7302
目录 基本概念 代码与实例 基本概念 这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例） let myChart = this.$echarts.init(document.getElementById(this.idStr)); 这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind...
记录：VUE3中UUID 生成唯一标识
qq_41300217的博客
03-13 2748
npm install uuid 或 yarn add uuid 或 pnpm add uuid。
vue生成uuid唯一标识
热门推荐
qq_40678503的博客
05-08 1万+
最近在写代码的时候，需要向后端传一个唯一字段作为标识，当多次提交内容不变的时候，标识不改，如果有内容改变，则标识改变，借鉴了一位大佬的uuid代码，但是太不好意思忘记是谁了，vue 使用watch监听对象的变化，如果变了调用一遍uuid的函数并且存在一个字段里就可以了。 uuid() { var s = []; var hexDigits = '0123456789abcdef'; for (var i = 0;
Android开发前景怎么样？如何成为一个更好的Android开发者？分享PDF高清版
CHAMPION8888的博客
02-06 342
前言 又到了面试求职高峰期，最近有很多网友都在求大厂面试题。正好我之前电脑里面有这方面的整理，于是就发上来分享给大家。 这些题目是网友去百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。 网上的都是按照公司划分的，想找具体某一方面的知识点有点不好找，我这里就根据知识点分门别类的整理了一下，想看哪一块可以快速找到，希望可以帮助大家，祝大家求职顺利。 接下来正面回答这个问题，从5个角度来展开对Binder的分析： （
vue 组件id重复问题
weixin_34167819的博客
06-29 4019
为什么80%的码农都做不了架构师？>>> ...
vue添加id属性_Vue系列：Vuex
weixin_29816689的博客
01-30 3298
Vuexvuex是专门为vuejs开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。它具有响应式特性。使用安装npm install vuex --savestore目录的index.js(推荐该目录结构)中使用Vue.use(Vuex)，创建Vuex的对象store，导出store对象。import Vue from 'vue'import Vuex from 'vuex'...
Vue(7) —— Vue组件讲解
Jzandth的博客
09-24 296
1.什么是组件 组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着殊途同归之妙；一般一个应用会以一棵嵌套的组件树的形式来组织： 我们可以简单的将组件理解为我们在HTML文件中使用的标签 2.怎么使用组件/怎么自定义组件 在定义中说了，组件是用来提高复用的，且组件的内容就是我们在HTML文件中使用的标签 使用语法 Vue.component("组件名称",{ templ
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值