Vue2.xでVueコンポーネントを2回カプセル化するときに、プロパティ、メソッド、およびスロットのバッチ継承の方法を解決します

質問:小さなパートナーから、Vue2.xバージョンでコンポーネントを2回カプセル化するときにバッチ継承の方法があるかどうか尋ねられました。

説明:今日の問題について話し合ったとき、私たちの会社の小さなパートナーが、IViewのコンポーネントを2回カプセル化するときにプロパティを継承する問題について話しました。彼はそれらを1つずつ書きました。それが面倒だったので、私はそれを見つけてショックを受けました。また、Vue2.xでは、バッチ継承の機能が公式に提供されており、その使用法は奇妙な方法とは見なされません。

<xxx-xxx
    :columns="columns"
    resizable
    show-overflow
    border
    stripe
    height="auto"
    :data="data"
>
</xxx-xxx>

解決策:二次パッケージングコンポーネントの場合、バッチ、属性、メソッド、およびスロットで継承する必要がある3人のボランティアがいます。これらの3人は、次のように最も必要です。

プロパティの継承

<xxx-xxx v-bind="$attrs">
</xxx-xxx>

メソッドの継承

<xxx-xxx v-on="$listeners">
</xxx-xxx>

スロットの継承
スロットは特別であり、公式が提供する直接的な方法はありませんが、次のようないくつかのテクニックの使用を妨げることはありません。

<xxx-xxx>
	<template v-for="(index, name) in $slots" :slot="name">
		<slot :name="name" />
	</template>
</xxx-xxx>

このようにして、プロパティ、メソッド、およびスロットのバッチ継承を完了することができます。これは、Vue3では完全には適用できないVue2.xバージョンに適用できることに注意してください。たとえば、$listenersはVue3で削除されました。 。、注意が必要です。

おすすめ

転載: blog.csdn.net/zy21131437/article/details/123351677
おすすめ