요소 플러스를 기반으로 하는 vue의 구성 요소 보조 캡슐화에 대한 자세한 예

이 글은 vue에 대한 관련 지식을 제공하며, 실제 개발에서는 element-plus를 기반으로 하는 vue3 컴포넌트 2차 캡슐화 데이터의 양방향 바인딩에 대한 관련 내용을 주로 소개합니다. 현재 비즈니스의 신속한 구축을 촉진하기 위해 자체 맞춤형 구성 요소 중 일부를 캡슐화하여 모든 사람에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, vue.js tutorial】

2차 캡슐화 데이터 요소 플러스 기반 양방향 바인딩

실제 개발에서는 요소 플러스 패키징이 필요한 경우가 많습니다 일부 현재 비즈니스를 신속하게 구축하기 위해 자체 맞춤형 구성요소를 제공합니다. vue2.0에서 상위-하위 구성 요소 데이터의 양방향 바인딩은 일반적으로 props: value.sync에 값을 전달하고 이를 하위 구성 요소인 this.$emit("update:value", value에서 사용하여 수행됩니다. ), 그런 다음 vue3에서 부모-자식 구성 요소의 유사한 양방향 바인딩을 구현하는 방법은 무엇입니까?

vue2에서 데이터의 응답성은 Object.defineProperty 객체를 기반으로 한 양방향 데이터 바인딩입니다. 이 하이재킹 + 게시 및 구독 모델은 객체 및 배열과 같은 복잡한 유형의 데이터를 잘 감지할 수 없습니다. vue3 데이터의 응답성은 프록시의 set 및 get 메소드를 기반으로 합니다. Object.defineProperty 하이재킹과 비교하면 프록시 메소드가 더 우아합니다.

구체적인 구현 아이디어는 다음과 같습니다.

양식의 레이블과 해당 선택기 및 입력 상자

효과 미리 보기

el-input 하위 구성 요소 캡슐화 baseInput.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-input></el-input>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  }
})
const emits = defineEmits([&#39;update:value&#39;])
// 通过重写计算属性的set和get方法，将计算属性的结果绑定在输入框的model中
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
</script>

el -하위 구성요소 캡슐화 선택 baseSelect.vue

<template>
  <div>
    <div>{{ props.blockName }}</div>
    <el-select>
      <el-option></el-option>
    </el-select>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  blockName: {
    type: String,
    default: &#39;&#39;
  },
  value: {
    type: String,
    default: &#39;&#39;
  },
  placeholder: {
    type: String,
    default: &#39;请选择&#39;
  },
  options: {
    type: Array,
    default() {
      return [{ value: &#39;&#39;, label: &#39;&#39; }]
    }
  },
  // 一下三个属性配合多选使用
  multiple: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  allowCreate: {
    type: Boolean,
    default: false
  }
})
const chanValue = computed({
  get: () => props.value,
  set: (val) => {
    emits(&#39;update:value&#39;, val)
  }
})
const emits = defineEmits([&#39;update:value&#39;])
</script>

다른 구성요소 호출

<baseinput></baseinput>
<baseselect></baseselect>

Explanation

계산된 set 및 get 메소드를 사용하면 상위-하위 양방향 바인딩을 수행할 수 있습니다. 컴포넌트, 더 이상 걱정할 필요가 없습니다. 다른 요소 컴포넌트의 일반적인 구현 아이디어는 하위 컴포넌트가 상위 컴포넌트의 props를 수정할 수 없다는 사실 때문에 고민됩니다.

기본 대화 상자 팝업 상자

el-dialog 하위 구성 요소 캡슐화 baseDialog.vue

<template>
  <div>
    <el-dialog>
      <div>{{props.title}}</div>
      <slot></slot>
      <template>
        <span>
          <button>取消</button>
          <button>确定</button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { computed } from &#39;vue&#39;
const props = defineProps({
  title: {
   type: String,
   default:&#39;&#39;
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits([&#39;update:isShow&#39;])
const handlerCancer = () => {
  emits(&#39;update:isShow&#39;, false)
}
const handlerSubmit = () => {
  // dialog 点击确定按钮之前处理相关业务逻辑
  emits(&#39;update:isShow&#39;, false)
}
const getShow = computed({
  get: () => props.isShow,
  set: (val) => {
    emits(&#39;update:isShow&#39;, val)
  }
})
</script>

다른 구성 요소 호출

<basedialog>
   <div>对应的插槽内容</div>
</basedialog>

Notes

v-model 양방향 바인딩 기본 소품 이름은 다음과 같습니다. value, 대화 상자와 같은 바인딩은 isShow입니다. v-model 뒤에 양방향 바인딩 소품 매개 변수 이름 v-model:isShow를 선언해야 하며, 입력과 같은 입력 상자 바인딩 및 기본값을 value로 선택해야 하므로 이를 무시하고 수행하지 않아도 됩니다. 그것을 쓰세요. 다른 값(즉, 값이 아닌 매개변수 값)을 바인딩하는 경우 v-model:isShow 선언

이 필요합니다.[관련 권장사항: javascript video tutorial, vue.js tutorial]

위 내용은 요소 플러스를 기반으로 하는 vue의 구성 요소 보조 캡슐화에 대한 자세한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!