当前位置:首页 >> 网络编程

解决vue单页面多个组件嵌套监听浏览器窗口变化问题

需求

最近公司有个大屏展示项目(如下图)

解决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"
 }
 }
}

四、配置成果物如下:

解决vue单页面多个组件嵌套监听浏览器窗口变化问题

需求分解

一个简单的嵌套组件:

<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>

<script>
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 "htmlcode">
this.$router.push({
 name: 'configData',
 query: {
 id: row.id
 }
})

来实现动态路由页面,这里也需要引入我们的根嵌套组件(嵌套入口)。

<template>
 <div class="config-data-warp">
 <div class="config-head">
  <span class="text">厂商编号:</span>
  <el-input class="config-input" type="text" size="mini" placeholder="厂商编号"
  clearable v-model.trim="vendorId">
  </el-input>
 </div>
 <div class="config-head">
  <span class="text">版本号:</span>
  <el-input class="config-input" type="text" size="mini" placeholder="版本号"
  clearable v-model.trim="version">
  </el-input>
 </div>
 <div class="config-main">
  <config-module :data="config" :root="true"
  :commit="commit" @commit="handlerCommit"></config-module>
 </div>
 <el-button class="config-commit-btn" type="primary"
  size="mini" @click="commit = true">确认提交</el-button>
 </div>
</template>
<script>
import configModule from './configModule'
export default {
 name: 'configData',
 components: {configModule},
 data () {
 return {
  id: this.$route.id,
  commit: false,
  vendorId: '',
  version: '',
  config: {} // 这里放点假数据
 }
 },
 mounted () { // 如果id存在,就去请求数据
 	if (id) { ... }
 },
 methods: {
 handlerCommit (data) { // 这里是汇总数据的地方,记下来,等下提到了好找
  console.log(data)
  this.commit = false
 }
 }
}
</script>

值得注意的是,确认提交按钮只是将commit变量置为true,而commit绑定在我们的嵌套组件中。

<div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child' + moduleName">
 <config-module :index="index" @change="changeChildName" @commit="handlerCommit"
 :commit="commit" :data="{key: value[0], child: value[1]}"></config-module>
</div>

这是嵌套组件的部分代码,我们可以看到commit被原封不动的传递给了子嵌套组件,也就是说,这里的commit变量起到通知所有嵌套组件执行了提交动作,这也是父组件控制子组件组件的唯一方式——传递数据变化props(或者使用vuex也可以)。

这里还有一点,就是定义什么是嵌套部分,什么是嵌套外部分,显然,厂商编号和版本号不属于嵌套部分。

还有传入的root变量,是为了控制根嵌套组件的名称不可修改,所以传个true就可以了。

step3:嵌套组件的实现(重点)

这里梳理一下嵌套组件需要提供的功能点:

1、能够做到传入数据的展示

2、能够动态添加项和模块

3,能够将修改了的数据传递出去

传入数据的展示

我们再回过头看看后台传给我们的数据格式:

{
 "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"
 }
 }
}

从中我们是否可以提炼出每个嵌套组件的数据格式?

module: {
 property-1: value-1,
 property-2: value-2,
 ......
 module-1: { ...... },
 mpdule-2: { ...... },
 ......
}

而且,我们需要这个对象的key和value是可以被双向绑定的。

可是我们想一下,对象的key可以双向绑定吗?显然不能!

这也就是说,原始传入的数据结构并不能用,需要进行处理:

<template>
 <div class="config-module-warp">
 <div class="config-head">
  <!-- 根组件固定模块名,或者说不需要模块名 -->
  <span class="config-header-item" v-if="root">配置:</span>
  <div class="config-header-item" v-else>
  <el-input class="config-module-name" type="text" size="mini"
   placeholder="模块名" clearable v-model="moduleName" @change="changeModuleName"></el-input>
  </div>
  <el-button class="config-header-item" type="primary" size="mini"
  @click="handleClickAddProperty">新增项</el-button>
  <el-button class="config-header-item" type="primary" size="mini"
  @click="handleClickAddModule">新增模块</el-button>
  <el-button v-if="root" class="config-btn" type="danger" size="mini"
  @click="handleClickClear">清空配置</el-button>
  <el-button v-else class="config-btn" type="danger" size="mini"
  @click="handleClickDeleteModule">删除模块</el-button>
 <div class="config-property" v-for="(value, index) in configJsonProperty"
  :key="index + 'property'">
  <el-input class="config-property-value" type="text" size="mini"
  placeholder="key" clearable v-model="value[0]"></el-input> :
  <el-input class="config-property-value" type="text" size="mini"
  placeholder="value" clearable v-model="value[1]"></el-input>
  <el-button class="config-header-item" type="danger" size="mini"
  @click="handleClickDeleteProperty(index)">删除该项</el-button>
 </div>
 <div class="config-children" v-for="(value, index) in configJsonChildren"
  :key="index + 'child'">
  <config-module :index="index" @change="changeChildName" @commit="handlerCommit"
  :commit="commit" :data="{key: value[0], child: value[1]}"></config-module>
 </div>
 </div>
</template>
...
data () {
 return {
 moduleName: '', // 绑定当前子模块名
 configJsonProperty: [], // 这里是子模块的property
 configJsonChildren: [], // 这里是子模块下的子模块(孖模块^-^)
 ...
 }
}
...
mounted () {
 if (this.data && this.root) {
 // 由于根节点是没有模块名的,数据的解析结构是{key: moduleName, child: moduleValue},参上。
 this.classify({child: this.data})
 } else if (this.data) {
 this.classify(this.data)
 }
}
// 或者将引用根组件的地方改成下面这样也可以:
// <config-module :data="{child: config}" :root="true" :commit="commit"
// @commit="handlerCommit"></config-module>
// _____________________________________
// mounted () {
// if (this.data) {
//  this.classify(this.data)
// }
// }
...
classify (prop) {
 let data = prop.child
 this.moduleName = prop.key
 for (let key in data) {
 if (typeof data[key] === 'object') {
  this.configJsonChildren.push([ // 这里将数组转化为可以双向绑定的二维数组
  key,
  data[key]
  ])
 } else {
  this.configJsonProperty.push([
  key,
  data[key]
  ])
 }
 }
}

实现动态增加

只需要添加空项就行了,但由于模块是由父组件传入的,所以改变模块名也需要同步改变父组件的模块名,而这里就用到了props中的index,代表父组件中的位置。

handleClickAddProperty () {
this.configJsonProperty.push([
 '',
 ''
 ])
},

handleClickAddModule () {
 this.configJsonChildren.push([
 '',
 {}
 ])
},

changeModuleName (value) {
 this.$emit('change', this.index, value)
},

changeChildName (index, name) {
 this.$set(this.configJsonChildren[index], 0, name)
},

孪生兄弟:动态删除

其实,增加数据和删除数据无外乎就是,本地数据本地改,外部数据同步改:

handleClickClear () {
 // 如果本身就是空,就无需操作,防止误操作,毕竟我挺讨厌弹窗的
 if (!this.configJsonProperty.length && !this.configJsonChildren.length) {
 return
 }
 // 敏感操作给个弹窗
 this.$confirm('确定清空所有配置"color: #ff00ff">重中之重:提取这个树结构中的数据

数据在各个子组件中保存,怎么把它们提取出来呢?

聪明的你肯定马上想到了我之前所说的commit变量吧,它将这个动作分发到了各个子组件。

所以,只要每个子组件听从命令,把数据层层上报,是不是就完成了呢?

这就好比是公司总经理想要开发一个软件,他就只要告诉各个部门:

哎,你们软件部负责做出软件可行性方案;

你们市场部负责调查同类软件和市场份额;

你们营销部赶快出炉软件推广方案,等等。

然后部门总监给各项目经理发小人物,然后项目经理再分解任务成需求给你。

最后做完了,流程就是:你 -》经理-》总监-》总经理。

在我们这份代码中,也是这样子的:

第一步:你要知道任务来了:

watch: {
 commit (val) {
 if (val) {
  this.handleClickCommit() // 接到任务
 } else {
  this.commitData = {} // 这里也标记一下
 }
 }
},

第一步:找到最底层的“你”,也就是找到这个树组件的末梢节点,

它的标志是:

if (!this.configJsonChildren.length) { ...... } // 他没有子节点了

d收集它的“工作成果”:

let obj = {}
this.configJsonProperty.forEach(v => {
 if (v[0] && v[1]) {
 obj[v[0]] = v[1]
 } else {
 this.$emit('error') // 如果有项不完整,可以报错
 }
})

你觉得上面代码有没有小问题?给你五秒想一想。

1

2

3

4

5

有没有这样一种情况?我们一不注意写了两个同样键名的项,不管是写到了错的模块里面还是怎样。

那么在上面的代码中,就会使得新值覆盖旧值,就有可能导致严重的事故!!!

所以我们改成:

handleClickCommit () {
 if (!this.configJsonChildren.length) {
 if (!this.moduleName && !this.root) {
  this.$emit('error')
  return
 }
 let obj = {}
 for (let v of this.configJsonProperty) {
  if (v[0] && v[1]) {
  if (obj.hasOwnProperty(v[0])) {
   this.$emit('error') // 啊,一不小心走神了
   return
  }
  obj[v[0]] = v[1]
  } else {
  this.$emit('error')
  // 这里不需要return是因为不会造成严重后果,当然也可以加上
  // 主要是我用这个功能时会一口气添加好多项,也不一定全填满,省得一个个删。
  }
 }
 this.$emit('commit', { // 把数据给经理!!!这个杀千刀的,天天催!
  key: this.moduleName, // 身份狗牌
  value: obj
 })
 }
}

啊,工作终于提交了,再也不担心了,接下来的事就交给经理去做吧!

经理:我手下管着这么多人,不可能来一个我上交一个吧?那就等他们全部上交了,我再整个打包上交吧。

首先第一步,我需要一个箱子来存他们的成果:

data () {
 return {
 moduleName: '',
 configJsonProperty: [],
 configJsonChildren: [],
 commitData: {} // 存放成果的箱子
 }
}

接下来就等他们上交了:

handlerCommit (data) {
 if (!this.moduleName && !this.root) { // 领导也要有名字,但总经理只有一个
 this.$emit('error')
 return
 }
 this.commitData[data.key] = data.value // 先按人头收下成果
 for (let item of this.configJsonChildren) {
 if (!this.commitData.hasOwnProperty(item[0])) return // 如果没收齐,继续等待
 }
 // 欧耶,收齐了
 let obj = {}
 for (let v of this.configJsonProperty) { // 这个for循环可以封成一个函数的,毕竟写了两次
 if (v[0] && v[1]) {
  if (obj.hasOwnProperty(v[0])) {
  this.$emit('error')
  return
  }
  obj[v[0]] = v[1]
 } else {
  this.$emit('error')
 }
 }
 this.$emit('commit', {
 key: this.moduleName,
 value: Object.assign(obj, this.commitData) // 领导自己的成果加上员工的成果
 })
}

还记得上面我让你记下的地方吗?

handlerCommit (data) {
 console.log(data) // 汇总数据,在这里可以发送给后台了
 this.commit = false // 任务完成标志
}
watch: {
 commit (val) {
 if (val) {
  this.handleClickCommit()
 } else {
  this.commitData = {} // 初始化子组件
 }
 }
},

到这里,嵌套组件也大致完工了,贴全代码:

<template>
 <div class="config-module-warp">
 <div class="config-head">
  <span class="config-btn" v-if="root">配置:</span>
  <div class="config-btn" v-else>
  <el-input class="config-module-name" type="text" size="mini" placeholder="模块名"
   clearable v-model="moduleName" @change="changeModuleName"></el-input>
  </div>
  <el-button class="config-btn" type="primary" size="mini"
  @click="handleClickAddProperty">新增项</el-button>
  <el-button class="config-btn" type="primary" size="mini"
  @click="handleClickAddModule">新增模块</el-button>
  <el-button v-if="root" class="config-btn" type="danger" size="mini"
  @click="handleClickClear">清空配置</el-button>
  <el-button v-else class="config-btn" type="danger" size="mini"
  @click="handleClickDeleteModule">删除模块</el-button>
 </div>
 <div class="config-property" v-for="(value, index) in configJsonProperty" :key="index + 'property'">
  <el-input class="config-property-value" type="text" size="mini"
  placeholder="key" clearable v-model="value[0]"></el-input> :
  <el-input class="config-property-value" type="text" size="mini"
  placeholder="value" clearable v-model="value[1]"></el-input>
  <el-button class="config-btn" type="danger" size="mini"
  @click="handleClickDeleteProperty(index)">删除该项</el-button>
 </div>
 <div class="config-children" v-for="(value, index) in configJsonChildren" :key="index + 'child'">
  <config-module :index="index" @change="changeChildName" @delete="deleteModule"
  @commit="handlerCommit" :commit="commit" :data="{key: value[0], child: value[1]}"></config-module>
 </div>
 </div>
</template>
<script>
export default {
 name: 'configModule',
 props: ['data', 'root', 'commit', 'index'],
 data () {
 return {
  moduleName: '',
  configJsonProperty: [],
  configJsonChildren: [],
  commitData: {},
  error: false
 }
 },
 watch: {
 commit (val) {
  if (val) {
  this.handleClickCommit()
  } else {
  this.commitData = {}
  this.error = false
  }
 }
 },
 computed: {
 },
 mounted () {
 if (this.data) {
  this.classify(this.data)
 }
 },
 methods: {
 classify (prop) {
  let data = prop.child
  this.moduleName = prop.key
  for (let key in data) {
  if (typeof data[key] === 'object') {
   this.configJsonChildren.push([
   key,
   data[key]
   ])
  } else {
   this.configJsonProperty.push([
   key,
   data[key]
   ])
  }
  }
 },
 handleClickAddProperty () {
  this.configJsonProperty.push([
  '',
  ''
  ])
 },
 handleClickAddModule () {
  this.configJsonChildren.push([
  '',
  {}
  ])
 },
 handleClickClear () {
  if (!this.configJsonProperty.length && !this.configJsonChildren.length) {
  return
  }
  this.$confirm('确定清空所有配置"color: #ff0000">总结

其实聪明的人根本就不需要我总结嘛,代码是最好的语言

所以这里我提出一些我的不足和没做完的部分,不过都是细枝末节啦:

第一个是错误的处理,我这边没有加上

第二个是模块应该有折叠功能,不然配置多看着就眼花缭乱,

不过v-show的使用大家应该也是登峰造极了。

然后,大家有什么意见和建议都可以在下方反馈。

感谢大家看完这一篇长文,么么哒~希望能给大家一个参考,也希望大家多多支持