没有合适的资源?快使用搜索试试~ 我知道了~
首页解决vue单页面多个组件嵌套监听浏览器窗口变化问题
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
3 下载量 32 浏览量
更新于2023-03-03
评论
收藏 202KB PDF 举报
需求 最近公司有个大屏展示项目(如下图) 页面的元素需要做响应式监听,图表需要跟着窗口响应变化 问题 每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化 结果只有父组件的代码生效 mounted(){ [removed] = () => { //当窗口发生改变时触发 // }; } 原因 经简单测试后发现,同一个路由页面只能注册一次浏览器窗口监听事件,第二次注册的会覆盖第一次注册 下边代码即可测试 mounted(){ [removed] = () => { //当窗口发生改变时触发 console.log(1) };
资源详情
资源评论
资源推荐
解决解决vue单页面多个组件嵌套监听浏览器窗口变化问题单页面多个组件嵌套监听浏览器窗口变化问题
需求需求
最近公司有个大屏展示项目(如下图)
页面的元素需要做响应式监听,图表需要跟着窗口响应变化
问题问题
每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化
结果只有父组件的代码生效
mounted(){
window.onresize = () => { //当窗口发生改变时触发
//
};
}
原因原因
经简单测试后发现,同一个路由页面只能注册一次浏览器窗口监听事件,第二次注册的会覆盖第一次注册
下边代码即可测试
mounted(){
window.onresize = () => { //当窗口发生改变时触发
console.log(1)
};
window.onresize = () => { //当窗口发生改变时触发 (会覆盖上一个函数)
console.log(2)
};
}
父子嵌套组件同理,子组件生命周期执行在父组件之前,父组件函数会覆盖子组件函数
解决方案解决方案
1、只在父页面写个监听,但是通过组件传值的方式传给子组件,并且子组件用watch监听传值的变化,响应改变
2、假如是多层组件嵌套,用vuex可能会更省力
补充知识:补充知识:vue/组件嵌套组件嵌套/无限嵌套无限嵌套/嵌套组件消息传递嵌套组件消息传递/嵌套父子组件传值嵌套父子组件传值
目前接到一个需求,是我之前从来没有实践过的,正好趁此机会做一个深度剖析,并记录下这次的成长,并分享给大家。
需求文档
一一 、(一个厂商编号和一个版本号)唯一决定一个配置、(一个厂商编号和一个版本号)唯一决定一个配置
二二 、、 配置内容支持无限嵌套配置内容支持无限嵌套
三、配置数据格式示例(配置包括项和模块):三、配置数据格式示例(配置包括项和模块):
{
"vendorId": "IL03#sub_01",
"version": "9.0.0",
"config": {
"module-1": {
"property-1": "value-1",
"property-2": "value-2",
"property-3": "value-3",
"module-1_1": {
"property-1_1": "value-1_1",
"property-1_2": "value-1_2",
"property-1_3": "value-1_3"
}
},
"module-2": {
"property-4": "value-4",
"property-5": "value-5"
}
}
}
四、配置成果物如下:四、配置成果物如下:
需求分解
一个简单的嵌套组件:
<template>
<div>
<span>{{data.content}}<span>
<div>
<nested :data="data.child"></nested>
<div>
</div>
</template>
<script>
export default {
name: 'nested',
props: ['data'] }
</script>
我们给最外层的组件(根嵌套组件)绑定形如
{
"content": "value",
"child": {
"content": "value-1"
"child": {
"content": "value-1_1"
......
}
}
}
的数据结构,就可以看见效果了,是不是和我们前面需求的数据结构很像?
开始动工开始动工
step1:最外层列表展示:最外层列表展示
这里作为静态路由页面展示即可(分页、查询、删除功能在这里做)
<!-- 这里使用了EL-UI -->
<template>
<!-- 应用配置入口 -->
<div class="app-config-wrap">
<!-- 增 -->
<div class="app-config-add">
<el-button type="primary" size="mini" @click="handleClickAdd">新增配置</el-button>
</div>
<!-- 查 -->
<div class="app-config-search">
<div class="label" @click="isShowFilter = !isShowFilter">
<span class="text">查询App配置</span>
<span class="el-icon-caret-right" v-if="!isShowFilter"></span>
<span class="el-icon-caret-bottom" v-else></span>
</div>
<div class="clear-all" @click="handleClearAll" v-if="isShowFilter" title="点击清空所有查询条件">
<span class="text">清空条件</span>
</div>
<div class="form-wrap" v-show="isShowFilter">
<div class="by-vendorId">
<el-input type="text" size="mini" placeholder="按厂商编号查询" clearable v-model.trim="vendorId">
</el-input>
</div>
<div class="by-version">
<el-input type="text" size="mini" placeholder="按版本号查询" clearable v-model.trim="version">
</el-input>
</div>
<div class="search-button">
<el-button type="primary" size="mini" @click="handleClickSearch">查 询</el-button>
</div>
</div>
</div>
<div class="app-config-main" :style="tableHeight">
<el-table size="mini" height="100%" :data="configList" stripe @row-click="handleClickRow"
highlight-current-row style="width: 100%;">
<el-table-column type="index" label="No." width="60"></el-table-column>
<el-table-column prop="vendorId" label="厂商编号" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="version" label="版本号" :show-overflow-tooltip="true"></el-table-column>
<el-table-column prop="operation" label="操作">
<template slot-scope="scope">
<!-- 删 -->
<el-button type="danger" size="mini" @click="handleClickDelete(scope.row.id)">删除配置</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination class="pagination" v-if="total" background small :current-page="pageNum"
:page-sizes="[10, 20, 40, 60]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="parseInt(total)" @current-change="changePageNo" @size-change="changePageSize">
</el-pagination>
</div>
</template>
剩余11页未读,继续阅读
weixin_38679276
- 粉丝: 2
- 资源: 911
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- RTL8188FU-Linux-v5.7.4.2-36687.20200602.tar(20765).gz
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
- SPC统计方法基础知识.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0