Vue3 コンポジション API がサードパーティコンポーネントをエレガントにカプセル化する方法-Vue.js-php.cn

Vue3 コンポジション API がサードパーティコンポーネントをエレガントにカプセル化する方法

WBOY

リリース： 2023-05-11 19:13:09

転載

1597 人が閲覧しました

はじめに

サードパーティコンポーネントの場合、サードパーティコンポーネントの元の機能 (プロパティ、イベント、スロット、メソッド) を維持しながら機能をエレガントに拡張するにはどうすればよいでしょうか?

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 コンポーネントに追加する必要があります。合計20個属性が5つ、イベントが5つ、スロットが4つあるのですが、どうすればいいでしょうか? 一つずつ渡すべきでしょうか? これでは面倒なだけでなく、可読性も悪くなります。

Vue2 では、このように処理できます。Vue サードパーティコンポーネントのカプセル化を表示するには、ここをクリックしてください。

この記事は、知識を移行し、Vue3 CombopositionAPI を使用して、エレガントにカプセル化するサードパーティコンポーネント~

1.サードパーティコンポーネントのプロパティ props とイベントの場合

$attrs:親ロール小道具として認識 (および取得) されない、ドメイン内の属性バインディング (クラスとスタイルを除く)。コンポーネントが props を宣言していない場合、すべての親スコープバインディング (クラスとスタイルを除く) がここに含まれ、内部コンポーネントは v-bind="$attrs"
# を介して渡すことができます。 ##$listeners: 親スコープ内の v-on イベントリスナーが含まれます (.native 修飾子を除く)。 v-on="$listeners" を渡して内部コンポーネント

と Vue3