- 博客(158)
- 收藏
- 关注
原创 vue父子组件传值2.0
一、子组件访问父组件的数据方式一 :子组件直接访问父组件的数据父组件在调用子组件时,绑定想要获取的父组件中的数据在子组件内部,使用 props 选项声明获取的数据,即接收来自父组件中的数据创建好的项目目录如下图所示:(不是必须在App.vue中才能使用子组件访问父组件数据)在App.vue 中写入...
2020-06-02 19:40:21 340
原创 在Vue中,你可以使用动态import()语法来动态加载组件,动态变量路径
在上面的示例中,当你点击"加载组件"按钮时,loadComponent方法会通过动态导入加载MyComponent.vue组件。导入成功后,将组件注册到Vue实例的dynamicComponent属性中,然后使用标签来渲染该组件。请注意,动态导入是一个返回Promise的函数,因此你可以使用.then()来处理导入成功的情况,并使用.catch()来处理导入失败的情况。在Vue中,你可以使用动态import()语法来动态加载组件。动态导入允许你在需要时异步加载组件,这样可以提高应用程序的初始加载性能。
2023-11-02 17:28:56 1635
原创 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 485
原创 .sync 父组件给子组件传值 子组件修改父组件方法
:visible.sync="visible"this.$emit("update:visible", false);
2022-04-03 20:23:17 283
原创 :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 404 1
原创 bpms.js
bpms.jsbpmn js 文件 package先放入正在开发的项目 挨个引入每个文件 如果文件问题 挨个百度解决 最后引入app.vue文件
2022-03-31 15:23:43 410
原创 具名插槽 父子传值
子组件 <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 606
原创 elementui 表单 必填和 其他正则同时校验
rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { validator: validateMoney, trigger: 'blur' } ] }
2021-12-22 15:22:29 367
原创 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 7071 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 861
原创 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 925
原创 开发中遇到的问题
需要刷新页面 this.route.go(0) 体验不好provide vue app.vue 加v-ifinject 子组件调用方法 控制 app.vue 的v-if
2021-11-18 21:05:41 93
原创 遇到的问题内存地址
树结构check change遍历循环settimeout 后存一个变量,第二次直接赋值,直接没有延时直接赋值,深拷贝出来才能重新赋值
2021-10-27 10:54:38 104
原创 el-tree :default-expanded-keys=“[2, 3]“
:default-expanded-keys=“deptid”数组push 不生效 必须this.deptid = deptid
2021-09-15 16:27:12 728
原创 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 342
原创 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 100
原创 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 1277
原创 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 113
原创 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 464
原创 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 1233
原创 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 555
原创 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 1203
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人