Resolva o método de herança em lote de propriedades, métodos e slots ao encapsular componentes Vue duas vezes no Vue2.x

Pergunta: Um pequeno parceiro me perguntou se existe um método para herança em lote ao encapsular componentes duas vezes na versão Vue2.x;

Descrição: ao discutir o problema hoje, um pequeno parceiro de nossa empresa falou sobre o problema de herdar propriedades ao encapsular os componentes do IView duas vezes. Ele os escreveu um por um. Fiquei chocado quando descobri, porque era muito problemático, e além disso, no Vue2.x, a função de herança em lote é fornecida oficialmente, e o uso não pode ser considerado um método estranho;

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

Solução: Para componentes de empacotamento secundário, existem três voluntários que precisam ser herdados em lotes, atributos, métodos e slots. Esses três são os mais necessários, conforme a seguir:

herança de propriedade

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

herança de método

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

Herança de slot
Os slots são especiais, e não há um método direto fornecido pelo oficial, mas isso não nos impede de usar algumas técnicas, como segue

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

Desta forma, a herança em lote de propriedades, métodos e slots pode ser completada. Vale ressaltar que isso é aplicável à versão Vue2.x do Vue, que não é totalmente aplicável no Vue3. Por exemplo, $listeners foi removido no Vue3 . , precisam de atenção;