element-ui 탄창 구성 요소를 봉인하려면

el-dialog를 하나의 구성 요소로 봉인

우리가 element-ui를 사용할 때, 만약 한 탄창의 내용이 매우 많다면, 우리는 자주 이 탄창을 하나의 구성 요소로 봉인할 것이다. 다음과 같다.

<!-- DetailDialog.vue html -->
<template>
 <el-dialog title=" " :visible.sync="visible" width="720px" >
  <p> </p>
 </el-dialog>
</template>

// DetailDialog.vue js
<script>
 props: {
  visible: {
   type: Boolean,
   default: false
  }
 }
</script>

el-dialog는 props를 수정하고 오류를 보고합니다.

그러나 이렇게 하면 문제가 생길 수 있습니다. 만약el-dialog 내부의 닫힌 이벤트를 촉발했을 때, 예를 들어 탄창 음영 등을 클릭하면 현재 구성 요소의props[visible]를 수정할 수 없습니다. 구성 요소가 prop 속성을 직접 수정할 수 없기 때문에 오류가 발생합니다.
props [visible]의 수정과 가져오기를 차단하기 위해 중간 변수 innerVisible를 추가했습니다.

<!-- DetailDialog.vue html -->
<template>
 <el-dialog title=" " :visible.sync="innerVisible" width="720px" >
  <p> </p>
 </el-dialog>
</template>

// DetailDialog.vue js
<script>
export default {
 props: {
  visible: {
   type: Boolean,
   default: false
  }
 },
 computed: {
  innerVisible: {
   get: function() {
    return this.visible
   },
   set: function(val) {
    this.$emit('update:visible', val)
   }
  }
 }
}
</script>

이렇게 하면el-dialog 내부에서prop[visible]를 수정할 때 우리는emit('update:') 방식으로 부모 구성 요소를 통지하여props를 직접 수정하지 않도록 합니다.물론 부모 구성 요소를 추가해야 합니다sync 수식자 수정을 수락합니다.

<!-- father.vue html -->
<DetailDialog :visible.sync="detailVisible" />

지금까지 봉인된 탄창 부품은 이미 문제가 없다.

계속 최적화, v-model 제어로 숨기기

// DetailDialog.vue js
<script>
export default {
 model: {
  prop: 'visible', //   v-model  props 
  event: 'toggle' //   v-model  
 },
 props: {
  visible: {
   type: Boolean,
   default: false
  }
 },
 computed: {
  innerVisible: {
   get: function() {
    return this.visible
   },
   set: function(val) {
    this.$emit('update:toggle', val)
   }
  }
 }
}
</script>

v-model에 접속하여 사용하면 더욱 높고 깔끔하다

<!-- father.vue html -->
<DetailDialog v-model="detailVisible" />

계속 최적화,mixins로 봉인

빈번하게 탄창 구성 요소를 봉인할 때 상술한 논리도 끊임없이 복제해야 하기 때문에 계속 최적화하고 상술한 제어 디스플레이의 숨겨진 논리를 mxins로 봉인하여 직접 복용하면 된다

// vModelDialog.js
export default {
 model: {
  prop: 'visible',
  event: 'toggle'
 },
 props: {
  visible: {
   type: Boolean,
   default: () => {
    return false
   }
  }
 },
 computed: {
  innerVisible: {
   get: function() {
    return this.visible
   },
   set: function(val) {
    this.$emit('toggle', val)
   }
  }
 }
}

그러면 탄창 플러그인을 봉인할 때mixins를 도입하면 숨겨진 논리를 표시할 수 있습니다.

// DetailDialog.vue js
<script>
import vModelDialog from './vModelDialog.js'
export default {
 mixins: [vModelDialog],
}
</script>

이상은element-ui 창문 구성 요소 봉인 절차의 상세한 내용입니다. 더 많은 element-ui 창문 구성 요소 봉인에 관한 자료는 저희 다른 관련 글을 주목해 주십시오!