解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題

更新時間：2020年07月30日 14:52:41 作者：checkMa

這篇文章主要介紹了解決vue單頁面多個組件嵌套監(jiān)聽瀏覽器窗口變化問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

需求

最近公司有個大屏展示項(xiàng)目（如下圖）

頁面的元素需要做響應(yīng)式監(jiān)聽，圖表需要跟著窗口響應(yīng)變化

問題

每一個圖表都被我寫成了一個組件，然后就在每一個組件里寫了一串代碼，監(jiān)聽瀏覽器變化

結(jié)果只有父組件的代碼生效

mounted(){
 window.onresize = () => { //當(dāng)窗口發(fā)生改變時觸發(fā)
 //
 };
}

原因

經(jīng)簡單測試后發(fā)現(xiàn)，同一個路由頁面只能注冊一次瀏覽器窗口監(jiān)聽事件，第二次注冊的會覆蓋第一次注冊

下邊代碼即可測試

mounted(){
 window.onresize = () => { //當(dāng)窗口發(fā)生改變時觸發(fā) 
 console.log(1)
 };
 window.onresize = () => { //當(dāng)窗口發(fā)生改變時觸發(fā) （會覆蓋上一個函數(shù)）
 console.log(2)
 };
}

父子嵌套組件同理，子組件生命周期執(zhí)行在父組件之前，父組件函數(shù)會覆蓋子組件函數(shù)

解決方案

1、只在父頁面寫個監(jiān)聽，但是通過組件傳值的方式傳給子組件，并且子組件用watch監(jiān)聽傳值的變化，響應(yīng)改變

2、假如是多層組件嵌套，用vuex可能會更省力

補(bǔ)充知識：vue/組件嵌套/無限嵌套/嵌套組件消息傳遞/嵌套父子組件傳值

目前接到一個需求，是我之前從來沒有實(shí)踐過的，正好趁此機(jī)會做一個深度剖析，并記錄下這次的成長，并分享給大家。

需求文檔

一、（一個廠商編號和一個版本號）唯一決定一個配置

二、配置內(nèi)容支持無限嵌套

三、配置數(shù)據(jù)格式示例（配置包括項(xiàng)和模塊）：

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

的數(shù)據(jù)結(jié)構(gòu)，就可以看見效果了，是不是和我們前面需求的數(shù)據(jù)結(jié)構(gòu)很像？

開始動工

step1：最外層列表展示

這里作為靜態(tài)路由頁面展示即可（分頁、查詢、刪除功能在這里做）

<!-- 這里使用了EL-UI -->
<template>
 <!-- 應(yīng)用配置入口 -->
 <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="點(diǎn)擊清空所有查詢條件">
    <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: [{ // 假數(shù)據(jù)
  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 () { // 這里發(fā)送查詢請求
 },
 changePageNo (val) { // 這里發(fā)送分頁請求
  this.pageNum = val
 },
 changePageSize (val) { // 這里發(fā)送分頁請求
  this.pageSize = val
 },
 handleClickDelete (id) { // 這里發(fā)送刪除請求
 },
 handleClickAdd () { // 使用路由方式跳轉(zhuǎn)到配置頁面（增加配置和修改配置同一頁面即可）
  this.$router.push({
  name: 'configData',
  query: {}
  })
 },
 handleClickRow (row) { // 通過id讓配置頁面初始化時請求數(shù)據(jù)，在跳轉(zhuǎn)頁面中watch即可
  this.$router.push({
  name: 'configData',
  query: {
   id: row.id
  }
  })
 }
 }
}
</script>
// 樣式我就不貼了，節(jié)省篇幅

step2:動態(tài)路由頁準(zhǔn)備

由于配置頁面展示是根據(jù)廠商編號和版本號動態(tài)改變的，所以這里用到

this.$router.push({
 name: 'configData',
 query: {
 id: row.id
 }
})

來實(shí)現(xiàn)動態(tài)路由頁面，這里也需要引入我們的根嵌套組件（嵌套入口）。

<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">確認(rèn)提交</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: {} // 這里放點(diǎn)假數(shù)據(jù)
 }
 },
 mounted () { // 如果id存在，就去請求數(shù)據(jù)
 	if (id) { ... }
 },
 methods: {
 handlerCommit (data) { // 這里是匯總數(shù)據(jù)的地方，記下來，等下提到了好找
  console.log(data)
  this.commit = false
 }
 }
}
</script>

值得注意的是，確認(rèn)提交按鈕只是將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變量起到通知所有嵌套組件執(zhí)行了提交動作，這也是父組件控制子組件組件的唯一方式——傳遞數(shù)據(jù)變化props（或者使用vuex也可以）。

這里還有一點(diǎn)，就是定義什么是嵌套部分，什么是嵌套外部分，顯然，廠商編號和版本號不屬于嵌套部分。

還有傳入的root變量，是為了控制根嵌套組件的名稱不可修改，所以傳個true就可以了。

step3：嵌套組件的實(shí)現(xiàn)（重點(diǎn)）

這里梳理一下嵌套組件需要提供的功能點(diǎn)：

1、能夠做到傳入數(shù)據(jù)的展示

2、能夠動態(tài)添加項(xiàng)和模塊

3，能夠?qū)⑿薷牧说臄?shù)據(jù)傳遞出去

傳入數(shù)據(jù)的展示

我們再回過頭看看后臺傳給我們的數(shù)據(jù)格式：

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

從中我們是否可以提煉出每個嵌套組件的數(shù)據(jù)格式？

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

而且，我們需要這個對象的key和value是可以被雙向綁定的。

可是我們想一下，對象的key可以雙向綁定嗎？顯然不能！

這也就是說，原始傳入的數(shù)據(jù)結(jié)構(gòu)并不能用，需要進(jìn)行處理：

<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">新增項(xiàng)</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)">刪除該項(xiàng)</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: '', // 綁定當(dāng)前子模塊名
 configJsonProperty: [], // 這里是子模塊的property
 configJsonChildren: [], // 這里是子模塊下的子模塊（孖模塊^-^）
 ...
 }
}
...
mounted () {
 if (this.data && this.root) {
 // 由于根節(jié)點(diǎn)是沒有模塊名的，數(shù)據(jù)的解析結(jié)構(gòu)是{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([ // 這里將數(shù)組轉(zhuǎn)化為可以雙向綁定的二維數(shù)組
  key,
  data[key]
  ])
 } else {
  this.configJsonProperty.push([
  key,
  data[key]
  ])
 }
 }
}

實(shí)現(xiàn)動態(tài)增加

只需要添加空項(xiàng)就行了，但由于模塊是由父組件傳入的，所以改變模塊名也需要同步改變父組件的模塊名，而這里就用到了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)
},

孿生兄弟：動態(tài)刪除

其實(shí)，增加數(shù)據(jù)和刪除數(shù)據(jù)無外乎就是，本地數(shù)據(jù)本地改，外部數(shù)據(jù)同步改：

handleClickClear () {
 // 如果本身就是空，就無需操作，防止誤操作，畢竟我挺討厭彈窗的
 if (!this.configJsonProperty.length && !this.configJsonChildren.length) {
 return
 }
 // 敏感操作給個彈窗
 this.$confirm('確定清空所有配置?', '警告', {
 confirmButtonText: '確定',
 cancelButtonText: '取消',
 type: 'warning'
 }).then(() => {
 // 這個是本地觸發(fā)的哦！
 this.configJsonProperty = []
 this.configJsonChildren = []
 })
},

handleClickDeleteProperty (index) { // 本地數(shù)據(jù)本地改
 this.configJsonProperty.splice(index, 1)
},

handleClickDeleteModule () {
 // 外部數(shù)據(jù)傳出改，由于是刪除操作，外部銷毀了會直接導(dǎo)致本地銷毀，本地?zé)o需再銷毀
 // 和改模塊名不一樣
 // 改模塊名時，雖然外部數(shù)據(jù)改變觸發(fā)了本地更新，但由于是push操作，并不會改變本地數(shù)據(jù)
 this.$emit('delete', this.index)
},

deleteModule (index) {
 // 與handleClickDeleteProperty方法比較，一定要分清哪個是子組件觸發(fā)，哪個是父組件觸發(fā)
 this.configJsonChildren.splice(index, 1)
},

重中之重：提取這個樹結(jié)構(gòu)中的數(shù)據(jù)

數(shù)據(jù)在各個子組件中保存，怎么把它們提取出來呢？

聰明的你肯定馬上想到了我之前所說的commit變量吧，它將這個動作分發(fā)到了各個子組件。

所以，只要每個子組件聽從命令，把數(shù)據(jù)層層上報，是不是就完成了呢？

這就好比是公司總經(jīng)理想要開發(fā)一個軟件，他就只要告訴各個部門：

哎，你們軟件部負(fù)責(zé)做出軟件可行性方案；

你們市場部負(fù)責(zé)調(diào)查同類軟件和市場份額；

你們營銷部趕快出爐軟件推廣方案，等等。

然后部門總監(jiān)給各項(xiàng)目經(jīng)理發(fā)小人物，然后項(xiàng)目經(jīng)理再分解任務(wù)成需求給你。

最后做完了，流程就是：你 -》經(jīng)理-》總監(jiān)-》總經(jīng)理。

在我們這份代碼中，也是這樣子的：

第一步：你要知道任務(wù)來了：

watch: {
 commit (val) {
 if (val) {
  this.handleClickCommit() // 接到任務(wù)
 } else {
  this.commitData = {} // 這里也標(biāo)記一下
 }
 }
},

第一步：找到最底層的“你”，也就是找到這個樹組件的末梢節(jié)點(diǎn)，

它的標(biāo)志是：

if (!this.configJsonChildren.length) { ...... } // 他沒有子節(jié)點(diǎn)了

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

let obj = {}
this.configJsonProperty.forEach(v => {
 if (v[0] && v[1]) {
 obj[v[0]] = v[1]
 } else {
 this.$emit('error') // 如果有項(xiàng)不完整，可以報錯
 }
})

你覺得上面代碼有沒有小問題？給你五秒想一想。

有沒有這樣一種情況？我們一不注意寫了兩個同樣鍵名的項(xiàng)，不管是寫到了錯的模塊里面還是怎樣。

那么在上面的代碼中，就會使得新值覆蓋舊值，就有可能導(dǎo)致嚴(yán)重的事故?。?！

所以我們改成：

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是因?yàn)椴粫斐蓢?yán)重后果，當(dāng)然也可以加上
  // 主要是我用這個功能時會一口氣添加好多項(xiàng)，也不一定全填滿，省得一個個刪。
  }
 }
 this.$emit('commit', { // 把數(shù)據(jù)給經(jīng)理?。?！這個殺千刀的，天天催！
  key: this.moduleName, // 身份狗牌
  value: obj
 })
 }
}

啊，工作終于提交了，再也不擔(dān)心了，接下來的事就交給經(jīng)理去做吧！

經(jīng)理：我手下管著這么多人，不可能來一個我上交一個吧？那就等他們?nèi)可辖涣?，我再整個打包上交吧。

首先第一步，我需要一個箱子來存他們的成果：

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

接下來就等他們上交了：

handlerCommit (data) {
 if (!this.moduleName && !this.root) { // 領(lǐng)導(dǎo)也要有名字,但總經(jīng)理只有一個
 this.$emit('error')
 return
 }
 this.commitData[data.key] = data.value // 先按人頭收下成果
 for (let item of this.configJsonChildren) {
 if (!this.commitData.hasOwnProperty(item[0])) return // 如果沒收齊，繼續(xù)等待
 }
 // 歐耶，收齊了
 let obj = {}
 for (let v of this.configJsonProperty) { // 這個for循環(huán)可以封成一個函數(shù)的，畢竟寫了兩次
 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) // 領(lǐng)導(dǎo)自己的成果加上員工的成果
 })
}

還記得上面我讓你記下的地方嗎？

handlerCommit (data) {
 console.log(data) // 匯總數(shù)據(jù)，在這里可以發(fā)送給后臺了
 this.commit = false // 任務(wù)完成標(biāo)志
}

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">新增項(xiàng)</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)">刪除該項(xiàng)</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('確定清空所有配置?', '警告', {
  confirmButtonText: '確定',
  cancelButtonText: '取消',
  type: 'warning'
  }).then(() => {
  this.configJsonProperty = []
  this.configJsonChildren = []
  })
 },
 handleClickDeleteProperty (index) {
  this.configJsonProperty.splice(index, 1)
 },
 handleClickDeleteModule () {
  this.$emit('delete', this.index)
 },
 deleteModule (index) {
  this.configJsonChildren.splice(index, 1)
 },
 changeModuleName (value) {
  this.$emit('change', this.index, value)
 },
 changeChildName (index, name) {
  this.$set(this.configJsonChildren[index], 0, name)
 },
 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')
   }
  }
  this.$emit('commit', {
   key: this.moduleName,
   value: obj
  })
  }
 },
 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) {
  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)
  })
 }
 }
}
</script>

總結(jié)

其實(shí)聰明的人根本就不需要我總結(jié)嘛，代碼是最好的語言

所以這里我提出一些我的不足和沒做完的部分，不過都是細(xì)枝末節(jié)啦：

第一個是錯誤的處理，我這邊沒有加上

第二個是模塊應(yīng)該有折疊功能，不然配置多看著就眼花繚亂，

不過v-show的使用大家應(yīng)該也是登峰造極了。

然后，大家有什么意見和建議都可以在下方反饋。

感謝大家看完這一篇長文，么么噠~希望能給大家一個參考，也希望大家多多支持腳本之家

您可能感興趣的文章: