Vue3 Composition API가 타사 구성 요소를 우아하게 캡슐화하는 방법

머리말

서드파티 구성요소의 경우, 타사 구성요소(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

$attrs의 타사 구성요소

• 속성 소품 및 이벤트의 경우: 상위 범위에서 소품으로 인식(및 획득)되지 않는 속성 바인딩(클래스 및 스타일 제외)을 포함합니다. 구성 요소가 소품을 선언하지 않으면 모든 상위 범위 바인딩(클래스 및 스타일 제외)이 여기에 포함되며 내부 구성 요소는 v-bind="$attrs"

• $listeners: 포함된 v-를 통해 전달될 수 있습니다. 상위 범위의 이벤트 리스너(.native 수정자 없음) v-on="$listeners"

및 Vue3

• $attrs를 통해 내부 구성 요소로 전달될 수 있습니다. 구성 요소 props 또는 사용자 정의 이벤트가 아닌 상위 범위의 속성 바인딩 및 이벤트를 포함합니다(클래스 포함). , 스타일 및 사용자 정의 이벤트) 및 내부 구성요소는 v-bind="$attrs"를 통해 전달될 수 있습니다.

• $listeners 객체가 Vue 3에서 제거되었습니다. 이벤트 리스너는 이제 $attrs의 일부입니다.

• 5101c0cdbdc49998c642c71f6b6410a8에서 보조 함수 useAttrs를 사용하면 $attrs를 얻을 수 있습니다.

//MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs"></el-input>
  </div>
</template>
<script setup>
import { useAttrs } from &#39;vue&#39;
const attrs = useAttrs()
</script>

물론 이것만으로는 충분하지 않습니다. 이렇게 작성하면 우리가 바인딩한 속성(클래스 및 스타일 포함)이 루트 요소에서도 작동합니다(위의 예는 class="my-input"인 Dom 노드입니다). 이러한 기본 동작을 방지하려면 InheritAttrs를 false로 설정해야 합니다.

inheritAttrs에 대한 Vue3 문서의 설명을 살펴보겠습니다

기본적으로 props로 인식되지 않는 상위 범위의 속성 바인딩은 "폴백"되어 루트 요소의 일반 HTML 속성으로 하위 항목에 적용됩니다. 구성 요소. 대상 요소나 다른 구성 요소를 래핑하는 구성 요소를 작성할 때 이는 항상 예상되는 동작을 따르지 않을 수 있습니다. 상속Attrs를 false로 설정하면 이러한 기본 동작이 제거됩니다. 이러한 속성은 인스턴스 속성 $attrs를 통해 유효해지며 v-bind를 통해 루트가 아닌 요소에 명시적으로 바인딩될 수 있습니다.

따라서 타사 구성 요소의 props 및 이벤트를 처리하기 위해 다음 코드를 작성할 수 있습니다.

// MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs"></el-input>
  </div>
</template>
<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs } from &#39;vue&#39;
const attrs = useAttrs()
</script>

2. 타사 구성 요소 슬롯의 경우

In Vue3

• $slots: 사용할 수 있습니다. 상위 구성 요소에 의해 전달된 슬롯 가져오기

• $scopedSlots는 Vue3에서 제거되었으며 모든 슬롯은 $slots

• 5101c0cdbdc49998c642c71f6b6410a8의 보조 함수 useSlots를 통해 $slots를 얻을 수 있습니다.

위 사항을 토대로 써드파티 컴포넌트 패키징을 위한 추가 슬롯을 추가하지 않고 써드파티 컴포넌트의 슬롯이 동일한 돔 노드에 있다면 우리도 까다로운 패키징 방법을 가지고 있는 것일까요? ??, $slots를 순회하여 슬롯 이름을 얻고 하위 구성 요소의 슬롯을 동적으로 추가합니다.

//MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs">
      <template v-for="k in Object.keys(slots)" #[k] :key="k">
        <slot :name="k"></slot>
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs, useSlots } from &#39;vue&#39;
const attrs = useAttrs()
const slots = useSlots()
</script>

위 조건이 충족되지 않으면 필요한 타사의 슬롯을 수동으로 추가해야 합니다. 하위 구성 요소의 구성 요소 ~

3. 타사 구성 요소에 대한 메서드

타사 구성 요소에 대한 메서드는 ref를 통해 구현합니다. 먼저 MyInput 컴포넌트의 el-input 컴포넌트에 ref="elInputRef" 속성을 추가한 다음, DefineExpose를 통해 상위 컴포넌트에 elInputRef를 노출시킵니다.

하위 컴포넌트: MyInput.vue

// MyInput.vue 
<template>
  <div class="my-input">
    <el-input v-bind="attrs" ref="elInputRef">
      <template v-for="k in Object.keys(slots)" #[k] :key="k">
        <slot :name="k"></slot>
      </template>
    </el-input>
  </div>
</template>
<script>
export default {
  name: &#39;MyInput&#39;,
  inheritAttrs: false
}
</script>
<script setup>
import { useAttrs, useSlots } from &#39;vue&#39;
const attrs = useAttrs()
const slots = useSlots()
const elInputRef = ref(null)
defineExpose({
  elInputRef  // <script setup>的组件里的属性默认是关闭的，需通过defineExpose暴露出去才能被调用
})
</script>

상위 페이지: Index.vue의 호출 코드는 다음과 같습니다:

// Index.vue 
<template>
  <my-input v-model=&#39;input&#39; ref="myInput">
    <template #prefix>姓名</template>
  </my-input>
</template>
<script setup>
import MyInput from &#39;./components/MyInput.vue&#39;
import { ref, onMounted } from &#39;vue&#39;
const input = ref(&#39;&#39;)
const myInput = ref(null) // 组件实例
onMounted(()=> {
  myInput.value.elInputRef.focus() // 初始化时调用elInputRef实例的focus方法
})
</script>

위 내용은 Vue3 Composition API가 타사 구성 요소를 우아하게 캡슐화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!