vue 단일 페이지 여러 구성 요소 내장 감청 브 라 우 저 창 변화 문제 해결

27658 단어 vue감청 하 다브 라 우 저창구.
수요
최근 회사 에 대형 스크린 전시 프로젝트 가 있 습 니 다(아래 그림)

페이지 의 요 소 는 응답 식 감청 을 해 야 합 니 다.도 표 는 창 에 따라 변화 해 야 합 니 다.
문제.
모든 도 표 는 내 가 하나의 구성 요소 로 쓴 후에 모든 구성 요소 에 코드 를 써 서 브 라 우 저 변 화 를 감청 했다.
결 과 는 부모 구성 요소 의 코드 만 유효 합 니 다.

mounted(){
 window.onresize = () => { //          
 //
 };
}
원인.
간단 한 테스트 를 통 해 같은 경로 의 페이지 는 브 라 우 저 창 감청 사건 을 한 번 만 등록 할 수 있 고 두 번 째 등록 은 첫 번 째 등록 을 덮어 씁 니 다.
아래 코드 는 테스트 할 수 있 습 니 다.

mounted(){
 window.onresize = () => { //           
 console.log(1)
 };
 window.onresize = () => { //           （        ）
 console.log(2)
 };
}
부모 구성 요소 가 같 습 니 다.하위 구성 요소 의 수명 주기 가 부모 구성 요소 보다 실 행 될 때 까지 부모 구성 요소 함수 가 하위 구성 요소 함 수 를 덮어 씁 니 다.
해결 방안
1.부모 페이지 에 만 감청 을 쓰 지만 구성 요소 의 값 을 전달 하 는 방식 으로 하위 구성 요소 에 전달 하고 하위 구성 요 소 는 watch 감청 전송 값 의 변화 에 응답 합 니 다.
2.다 중 구성 요소 가 내장 되 어 있다 면 vuex 를 사용 하 는 것 이 더 편리 할 수 있 습 니 다.
추가 지식:vue/구성 요소 내장/무한 내장/내장 구성 요소 메시지 전달/내장 부자 구성 요소 전송 값
지금 은 제 가 지금까지 실천 해 본 적 이 없 는 수 요 를 받 았 습 니 다.이 기 회 를 틈 타 심도 있 는 분석 을 하고 이번 성장 을 기록 하여 여러분 께 공유 하 겠 습 니 다.
필요 문서
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"
 }
 }
}
4.구성 성과 물 은 다음 과 같다.

수요 분해
간단 한 구성 요소:

<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"
 ......
 }
 }
}
데이터 구 조 를 보면 효 과 를 볼 수 있 습 니 다.우리 가 앞에서 필요 로 하 는 데이터 구조 와 비슷 하지 않 습 니까?
착공 하 다
step 1:가장 바깥쪽 목록 표시
여 기 는 정적 경로 로 페이지 를 표시 하면 됩 니 다.(페이지,조회,삭제 기능 은 여기 서 합 니 다)

<!--      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 ? { 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: 'configData',
  query: {}
  })
 },
 handleClickRow (row) { //   id             ，      watch  
  this.$router.push({
  name: 'configData',
  query: {
   id: row.id
  }
  })
 }
 }
}
</script>
//        ，
step 2:동적 경로 페이지 준비
설정 페이지 전 시 는 제조 업 체 번호 와 버 전 번호 에 따라 동적 으로 바 뀌 었 기 때문에 여기 서 사용 합 니 다.

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>
주의해 야 할 것 은 제출 단 추 를 확인 하 는 것 은 commt 변 수 를 true 로 설정 하 는 것 이 고 commt 는 우리 의 내장 구성 요소 에 연결 되 어 있 습 니 다.

<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>
이것 은 구성 요소 의 일부 코드 입 니 다.commt 가 하위 구성 요소 에 그대로 전 달 된 것 을 볼 수 있 습 니 다.즉,이 commt 변 수 는 모든 구성 요소 가 제출 동작 을 수행 했다 는 것 을 알 릴 수 있 습 니 다.이것 은 부모 구성 요소 가 하위 구성 요 소 를 제어 하 는 유일한 방법 입 니 다.데이터 변화 props(또는 vuex 를 사용 해도 됩 니 다)를 전달 하 는 것 입 니 다.
여기에 또 하 나 는 포 함 된 부분 이 무엇 인지,포 함 된 외부 부분 이 무엇 인지 정의 하 는 것 이다.분명히 제조 업 체 번호 와 버 전 번 호 는 포 함 된 부분 에 속 하지 않 는 다.
그리고 들 어 오 는 루트 변 수 는 루트 구성 요소 의 이름 을 변경 할 수 없 도록 제어 하기 위해 서 true 를 보 내 면 됩 니 다.
step 3:내장 구성 요소 의 실현(중점)
구성 요소 가 제공 해 야 할 기능 점 을 정리 합 니 다.
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: { ...... },
 ......
}
그리고 이 대상 의 키 와 value 가 양 방향 으로 연결 되 어야 합 니 다.
그런데 생각해 보 겠 습 니 다.대상 의 키 는 양 방향 으로 연결 할 수 있 습 니까?분명히 안 돼!
이것 은 원시 적 으로 들 어 온 데이터 구 조 를 사용 할 수 없고 처리 해 야 한 다 는 것 이다.

<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: [], //            （I  ^-^）
 ...
 }
}
...
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('        ?', '  ', {
 confirmButtonText: '  ',
 cancelButtonText: '  ',
 type: 'warning'
 }).then(() => {
 //          ！
 this.configJsonProperty = []
 this.configJsonChildren = []
 })
},

handleClickDeleteProperty (index) { //        
 this.configJsonProperty.splice(index, 1)
},

handleClickDeleteModule () {
 //        ，       ，              ，       
 //         
 //      ，               ，    push  ，         
 this.$emit('delete', this.index)
},

deleteModule (index) {
 //  handleClickDeleteProperty    ，             ，        
 this.configJsonChildren.splice(index, 1)
},
중요 한 것:이 트 리 구조의 데 이 터 를 추출 합 니 다.
데 이 터 는 각 하위 구성 요소 에 저장 되 는데 어떻게 추출 합 니까?
똑똑 한 당신 은 내 가 전에 말 한 commt 변 수 를 바로 생각 했 을 것 입 니 다.이 동작 을 각 키 구성 요소 에 나 누 어 주 었 습 니 다.
그래서 모든 하위 구성 요소 가 명령 에 따라 데 이 터 를 층 층 이 보고 하면 완성 되 는 것 이 아 닙 니까?
이것 은 마치 회사 사장 이 소프트웨어 를 개발 하려 고 하 는 것 과 같다.그 는 각 부서 에 만 알려 준다.
아,너희 소프트웨어 부 는 소프트웨어 타당 성 방안 을 만 드 는 것 을 책임 진다.
너희 시장 부 는 같은 종류의 소프트웨어 와 시장 점유 율 을 조사 하 는 것 을 책임 진다.
너희 마 케 팅 부 는 빨리 소프트웨어 홍보 방안 을 내 놓 아 라,등등.
그리고 부서 총감독 이 각 프로젝트 매니저 에 게 작은 인물 을 보 낸 후에 프로젝트 매니저 는 다시 임 무 를 분해 하여 너 에 게 필요 로 한다.
마지막 으로 끝 났 습 니 다.절 차 는 바로 당신-매니저-총감독-총지배인 입 니 다.
우리 코드 에서 도 이 렇 습 니 다.
STEP 1:미 션 이 왔 다 는 것 을 알 아야 한다.

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') //        ，    
 }
})
너 는 위의 코드 에 작은 문제 가 있다 고 생각 하 니?5 초 줄 게.생각 해 봐.
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('        ?', '  ', {
  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>
총결산
사실 똑똑 한 사람 은 내 가 정리 할 필요 가 없 잖 아.코드 가 제일 좋 은 언어 잖 아.
그래서 여기 서 나 는 나의 부족 함 과 다 하지 못 한 부분 을 제 기 했 지만 모두 지엽 적 인 부분 에 불과 하 다.
첫 번 째 는 잘못된 처리 입 니 다.제 쪽 에 서 는 추가 하지 않 았 습 니 다.
두 번 째 는 모듈 에 접 는 기능 이 있어 야 합 니 다.그렇지 않 으 면 설정 이 많이 보면 눈 이 어 지 럽 습 니 다.
하지만 v-show 의 사용 도 모두 가 최고조 에 달 했 을 것 이다.
그리고 여러분 이 어떤 의견 과 건의 가 있 으 면 아래 에서 피드백 할 수 있 습 니 다.
이 긴 글 을 읽 어 주 셔 서 감사합니다.
PyQT 5 속성 튜 토리 얼 의 Qt Designer 소개 및 입문
matlab 카메라 기반 xml 파일 내 보 내기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage