- 博客(7)
- 收藏
- 关注
原创 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
6149
原创 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
2673
原创 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
6254
原创 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
813
转载 【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
1030
转载 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
945
转载 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
397
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人