需求
最近公司有个大屏展示项目(如下图)
页面的元素需要做响应式监听,图表需要跟着窗口响应变化
问题
每一个图表都被我写成了一个组件,然后就在每一个组件里写了一串代码,监听浏览器变化
结果只有父组件的代码生效
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"
}
}
}
四、配置成果物如下:
需求分解
一个简单的嵌套组件:
{ {data.content}}
export default {
name: 'nested',
props: ['data']
}
我们给最外层的组件(根嵌套组件)绑定形如
{
"content": "value",
"child": {
"content": "value-1"
"child": {
"content": "value-1_1"
......
}
}
}
的数据结构,就可以看见效果了,是不是和我们前面需求的数据结构很像?
开始动工
step1:最外层列表展示
这里作为静态路由页面展示即可(分页、查询、删除功能在这里做)
新增配置
查询App配置
清空条件
highlight-current-row style="width: 100%;">
删除配置
: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">
export default {
name: 'appConfig',
components: {},
props: [],
data () {
return {
isShowFilter: false,
vendorId: '',
version: '',
pageNum: 1,
pageSize: 20,
total: 0,
configList: [{ // 假数据
id: 1,
vendorId: 'cjm',
version: '10.0.0'
}]
}
},
computed: {
tableHeight () {
return this.isShowFilter ? { height: 'calc(100% - 129px)' } : { height: 'calc(100% - 90px)' }
}
},
methods: {
handleClearAll () {
this.vendorId = ''
this.version = ''
},
handleClickSearch () { // 这里发送查询请求
},
changePageNo (val) { // 这里发送分页请求
this.pageNum = val
},
changePageSize (val) { // 这里发送分页请求
this.pageSize = val
},
handleClickDelete (id) { // 这里发送删除请求
},
handleClickAdd () { // 使用路由方式跳转到配置页面(增加配置和修改配置同一页面即可)
this.$router.push({
name: 'confi