小编zha*_*rui的帖子

我有一个drop-down.vue组件,如下所示:

<template>
    <div @mouseenter="handleEnter" @mouseleave="handleLeave" @click="handleClick" v-click-outside="hide">
        <slot name="dropdownBtn"  :visible="visible" ></slot>
        <slot v-if="visible" name="dropdownWrap"  :visible="visible"></slot>
    </div>
</template>
...

它是一个下拉组件,然后点击或悬停dropdownBtn dropdownWrap将apear/disapear.

现在我有另一个组件需要下拉列表,所以我可以通过两种方式使用下拉列表:

第一:使用嵌套组件

    <template>
        <ui-dropdown>
            <div name="dropdownBtn">...</div>
            <div name="dropdownWrap">...</div>
        </ui-dropdown>
    </template>
...

第二:使用扩展

<template>
<!-- the handleEnter and handleLeave are extend from the dropdown component -->

<div>
    <div class="btn" @mouseenter="handleEnter" @mouseleave="handleLeave">...</div>
    <div class="popup" @mouseenter="handleEnter" @mouseleave="handleLeave">...</div>
</div>
<template>

<script>
import dropdown from '../dropdown';
export default {
    extend: dropdown,
    ...
}
</script>

我认为第一个更好.但第二个比第一个少一个组件,性能会更好吗？

谁能告诉我哪个更好？