- 博客(151)
- 收藏
- 关注
RSS订阅
原创 vue父子组件传值2.0
一、子组件访问父组件的数据方式一 ：子组件直接访问父组件的数据父组件在调用子组件时，绑定想要获取的父组件中的数据在子组件内部，使用 props 选项声明获取的数据，即接收来自父组件中的数据创建好的项目目录如下图所示：（不是必须在App.vue中才能使用子组件访问父组件数据）在App.vue 中写入...
2020-06-02 19:40:21
292
原创 在Vue中，你可以使用动态import()语法来动态加载组件，动态变量路径
在上面的示例中，当你点击"加载组件"按钮时，loadComponent方法会通过动态导入加载MyComponent.vue组件。导入成功后，将组件注册到Vue实例的dynamicComponent属性中，然后使用标签来渲染该组件。请注意，动态导入是一个返回Promise的函数，因此你可以使用.then()来处理导入成功的情况，并使用.catch()来处理导入失败的情况。在Vue中，你可以使用动态import()语法来动态加载组件。动态导入允许你在需要时异步加载组件，这样可以提高应用程序的初始加载性能。
2023-11-02 17:28:56
808
原创 vue-element-admin 前端路由放后端
修改store/modules/permission.jsstore.state.user.asyncRoutes 需要在getinfo 接口中存储，这里取出来import { asyncRoutes, constantRoutes } from '@/router'import Layout from '@/layout'import store from '..'/** * Use meta.role to determine if the current user has permiss
2022-04-27 16:36:40
437
原创 .sync 父组件给子组件传值 子组件修改父组件方法
:visible.sync="visible"this.$emit("update:visible", false);
2022-04-03 20:23:17
249
原创 :prop父组件给子组件传递函数 子组件接收 并default子组件自己的方法 问题
default: 中取不到thisprops:{ beforeClose: { type: Function, default: null, },}判断子组件是否接到父组件的方法 接到使用 没有接到进else自定义方法beforeClose1() { console.log(this.beforeClose); console.log(5555); if (this.beforeClose) { return this.beforeCl
2022-04-03 19:50:27
367
1
原创 bpms.js
bpms.jsbpmn js 文件 package先放入正在开发的项目 挨个引入每个文件 如果文件问题 挨个百度解决 最后引入app.vue文件
2022-03-31 15:23:43
346
原创 具名插槽 父子传值
子组件 <template slot-scope="scope"> <slot name="button" :nihao="nihao" :scope="scope" /> </template>父组件子组件 name=“button” 父组件 v-slot:button=“slotProps” 参数从slotProps里取汁 父向子传值 遵循 父子组件传值即可 <templa
2022-02-24 13:06:36
578
原创 elementui 表单 必填和 其他正则同时校验
rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { validator: validateMoney, trigger: 'blur' } ] }
2021-12-22 15:22:29
334
原创 js 把数组对象中 某一项属性相同的对象筛选出来
原数组[ { name:'小明', age:'18', address:'天上' }， { name:'小红', age:'19', address:'地里' }， { name:'小明', age:'20', address:'叙利亚' }， { name:'小明', age:'5', address:'娘胎' }，]想处理成[ { name:小明， list:[{ age:18, address:'天
2021-12-10 17:48:18
6640
1
原创 elementui表格树结构 全选功能
<template> <div> <el-table ref="multipleTable" :data="tableData" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" @select-all="selectAll" > <el-table-column t
2021-11-26 17:54:18
780
原创 js 两个年月日计算相隔天数
/** * 计算两个日期之间的天数 * @param dateString1 开始日期 yyyy-MM-dd * @param dateString2 结束日期 yyyy-MM-dd * @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0 */function getDaysBetween(dateString1,dateString2){ var startDate = Date.parse(dateString1); var e
2021-11-25 14:33:09
899
原创 开发中遇到的问题
需要刷新页面 this.route.go(0) 体验不好provide vue app.vue 加v-ifinject 子组件调用方法 控制 app.vue 的v-if
2021-11-18 21:05:41
77
原创 遇到的问题内存地址
树结构check change遍历循环settimeout 后存一个变量，第二次直接赋值，直接没有延时直接赋值，深拷贝出来才能重新赋值
2021-10-27 10:54:38
89
原创 el-tree :default-expanded-keys=“[2, 3]“
:default-expanded-keys=“deptid”数组push 不生效 必须this.deptid = deptid
2021-09-15 16:27:12
677
原创 js设计模式之单例模式
之所以叫单例模式就是因为他保证了不管你调用我几次,老子就输出一次实例的特点,我们用ES6语法举个简单的例子class Per { constructor(name) { this.name = name; } static sayName(name) { return new Per(name); }}var a = Per.sayName("码不停息");var b = Per.sayName("码不停息2");console.log(a); // Per {n.
2021-07-12 14:19:56
325
原创 echarts
<template> <div> <div class="income" /> </div></template><script>import echarts from 'echarts'// import { start } from 'nprogress'export default { name: 'Income', data() { return { // curre
2021-07-09 17:53:50
89
原创 vue-router 中hash和history路由模式实现原理是什么
今天爱分享给大家带来vue-router 中hash和history路由模式实现原理是什么【面试题详解】，希望能够帮助到大家。（1）hash 模式的实现原理早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 ‘#search’：https://www.word.com#searchhash 路由模式的实现主要是基于下面几个特性：URL 中
2021-07-09 10:20:01
1234
原创 vue 性能优化
1.代码层面1. 下里将所有的数据都放在data中，data中的教据都会增加getter和setter,会收集对应的watcher2. vue在v-for时给每项元素绑定事件需要用事件代理3. spa页面采用keep-alive缓存组件4. 拆分组件(提高复用性.增加代码的可维护性，减少不必要的渲染）5. vif当值为false时内部指令不会执行,具有阻断功能，很多惆况下使用v-if代v.show6. key保证唯一性（默认vue会采用就地复用策略}7.object.freeze 冻结教据（就
2021-06-30 15:08:28
95
原创 vueEventBus通信，传值和调用方法
1.在main.js中挂载Vue.prototype.$EventBus = new Vue()2.在发送的组件中触发方法 onSubmit() { // this.page = 1 // this.getinfo() console.log(this.$EventBus) this.$EventBus.$emit('aMsg', '来自A页面的消息') },3.在接受组件中获取值和调用组件自己的方法 mounted() {
2021-06-30 11:11:00
410
原创 elementui css全局修改table 鼠标移入背景颜色
/* 选中某行时的背景色*/.el-table__body tr.current-row > td { background-color: #dce8fb !important;}/*鼠标移入某行时的背景色*/.el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #dce8fb;}/* table 加fix 鼠标移入某行时的背景色 */.el-table__body tr
2021-06-22 13:10:42
1203
原创 v-if和v-show、display: none和visibility：hidden的区别
v-if指令和v-show指令的区别相同点：都可以控制标签的显隐。不同点：一、实现本质方法区别v-if是动态的向DOM树内添加或者删除DOM元素v-show本质是利用标签的display属性，通过visibility和none控制显隐v-if="false"在DOM不能获取到该标签v-show=false在DOM中仍能获取到该标签二、编译的区别v-show其实是在控制cssv-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁的重建内部的事件监听和子组件三、编译的条件v-sho
2021-06-17 16:44:49
517
原创 xhr.abort（）解决接口重复低啊用问题(鼠标连点)
1.控制按钮 disable接口调用的时候 给按钮加disable 属性 接口调通 关闭disable2. xhr.abort()let btn = document.getElementById('btn')let lastXhrbtn.onclick = function(){if(lastXhr){lastXhr.abort()}lastXhr = getAuthCode()}function getAuthCode(){let xhr = new XMLHttpRequ
2021-06-16 11:20:07
1158
原创 elementui表格排名
<el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" class="table" align="center" :data="tableData" stripe border style="width: 95%; margin-left: 2.5%" @sort-change="rankSort" ...
2021-06-16 10:52:39
630
原创 elementui 表格上加小问号 鼠标移入提示文字
<el-table-column align="center" prop="efficiency" sortable="custom" label="效率值" :render-header="renderHeader" show-overflow-tooltip min-width="130" /> renderHeader(h, { column, ...
2021-06-16 10:48:11
1724
原创 使用 keep-alive 需要判断路由from 走active
// beforeRouteEnter(to, from, next) { // console.log(to) // console.log(from) // console.log(next) // next((vm) => { // console.log(from.name === 'StatusMonitoring', 1212121) // if (from.name === 'StatusMonitoring') { // ..
2021-06-16 10:33:14
289
原创 js 深拷贝封装
function deepClone(source) { if (!source && typeof source !== 'object') { throw new Error('error arguments', 'deepClone') } const targetObj = source.constructor === Array ? [] : {} Object.keys(source).forEach(keys => { if (source
2021-06-16 10:30:42
133
原创 eslint
{ "editor.quickSuggestions": { "strings": true }, "workbench.startupEditor": "newUntitledFile", "window.zoomLevel": 0, "eslint.validate": [ "javascript", "javascriptreact" ], "[typescript]": { "ed
2021-05-31 13:31:18
97
1
原创 git 命令
1.添加到仓库git add .git commit --no-verify -m "xxx"git pull origin xxxgit push origin xxx2切换分支git checkout xxx3.查看分支git branch -a4合并分支在当前分支输入命令，将其他分支代码合并到当前分支git merge xxx...
2021-05-27 14:25:56
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人