hukay22-CSDN博客

原创 vue中父组件传值给子组件，父组件值改变，子组件重新渲染

cityComponents是子组件，cityId是父组件传给子组件的值，getData是子组件的渲染数据方法一：在父组件中用ref=“com” 来声明组件，然后通过this.$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染，一定要写Vue.nextTick( [callback, context] ) 子组件this.$emit('checkcity', row) 父组件 checkcity(row) { this.cityId = row.i

2022-04-02 09:56:06 6200

原创 8种vue组件通信方式

vue是数据驱动视图更新的框架，所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属）针对以上关系我们归类为：.

2022-04-01 14:45:42 2687

原创 element-ui 修改时间选择器的样式

element-ui 修改时间选择器的样式一般项目中如果设置了scoped属性，可以通过>>>或者/deep/来修改其他第三方组件的样式。 <el-date-picker v-model="valueTime" type="datetime" placeholder="选择日期时间"> </el-date-picker> 但是elementUI的时间选择器el-date-picker是将元素直接挂载到页面的&

2022-03-31 17:27:33 6307

原创 el-tree树形控件过滤所有符合条件的选项

HTML： <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input> <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ...

2022-03-31 17:07:04 852

转载【vue---javascript】将后端返回的list数据转化为树结构

一、效果：将 treeRawData:[ //后端返回的数据 { title: "地球", id: "1", parentId: "0" }, { title: "中国", id: "2", parentId: "1" }, { title: "上海", id: "3", parentId: "2" }, ...

2022-03-31 15:28:25 1060

转载 html5全屏后，无法用keypress或keydown监听到Esc按键

浏览器默认不让监听Esc键我们有需要在Esc按键后触发事件。代码如下 //监听窗口退出全屏解决无法监听Esc按键 window.onresize = function(){ if(!checkFull()){ //要执行的动作 $('#FullScreen').html('<i class="larry-icon larry-quanping"></i>全屏'); } } function checkFu...

2022-03-04 11:21:04 966

转载 vue 组件封装 | 图片放大镜（同天猫、淘宝、京东等商品图片放大浏览效果）

目录封装组件 s-imgZoom.vue <template> <div style="display: flex;position: relative"> <div class="box" :style="minImgBoxStyle" @mouseleave="mouseLeave" @mouseenter="mouseEnter" @..

2022-03-03 16:08:40 409

hukay22的博客