Vue3 Composition API가 타사 구성 요소를 우아하게 캡슐화하는 방법-View.js-php.cn

머리말

서드파티 구성요소의 경우, 타사 구성요소(props, 이벤트, 슬롯, 메소드)의 원래 기능을 유지하면서 기능을 우아하게 확장하는 방법은 무엇입니까?

Element Plus의 el-input을 예로 들어보세요.

이전에 MyInput 구성 요소를 캡슐화하고 자신의 고유한 방식에 따라 사용할 소품, 이벤트, 슬롯 및 메서드를 추가하여 이렇게 플레이했을 가능성이 매우 높습니다. 다시 작성하세요:

// MyInput.vue
<template>
  <div class="my-input">
    <el-input v-model="inputVal" :clearable="clearable" @clear="clear">
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
      <template #suffix>
      <slot name="suffix"></slot>
    </template>
    </el-input>
  </div>
</template>
<script setup>
import { computed } from &#39;vue&#39;
const props = defineProps({
  modelValue: {
    type: String,
    default: &#39;&#39;
  },
  clearable: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits([&#39;update:modelValue&#39;, &#39;clear&#39;])
const inputVal = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits(&#39;update:modelValue&#39;, val)
  }
})
const clear = () => {
  emits(&#39;clear&#39;)
}
</script>

로그인 후 복사

그러나 일정 시간이 지나면 요구 사항이 변경되고 el-input 구성 요소의 다른 기능을 MyInput 구성 요소에 추가해야 합니다. 속성, 이벤트 5개, 슬롯 4개를 하나씩 전달해야 할까요? 번거로울 뿐만 아니라 가독성도 떨어집니다.

Vue2에서는 이렇게 처리할 수 있습니다. Vue 타사 구성 요소 캡슐화를 보려면 여기를 클릭하세요

이 문서는 지식을 전달하고 Vue3 CompositionAPI를 사용하여 타사 구성 요소를 우아하게 캡슐화하는 방법을 탐색하는 데 도움이 됩니다~

1 . Vue2

속성 소품 및 이벤트의 경우: 상위 범위에서 소품으로 인식(및 획득)되지 않는 속성 바인딩(클래스 및 스타일 제외)을 포함합니다. 구성 요소가 소품을 선언하지 않으면 모든 상위 범위 바인딩(클래스 및 스타일 제외)이 여기에 포함되며 내부 구성 요소는 v-bind="$attrs"
$listeners: 포함된 v-를 통해 전달될 수 있습니다. 상위 범위의 이벤트 리스너(.native 수정자 없음) v-on="$listeners"

및 Vue3