Vue - 哪个更好？扩展组件或嵌套组件？

Question

我有一个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>

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

谁能告诉我哪个更好？

Answer 1

两种方式都有效,我不能说一种方法是正确的而另一种方式不是,这取决于你的要求.

延伸

• 如果要以某种方式修改基本组件的模板,则扩展基础组件可能会变得毛茸茸(您无法真正修改基本组件模板的一部分,您可以保留基本模板或完全重新定义它).
• 您需要确保新模板符合基本组件正常工作所需的任何要求(例如某些refs 的存在,使用正确的CSS类名等).
• 基础和扩展组件紧密耦合.

组成

• 我会说这更像是"Vue方式".
• 你可以利用插槽.
• 子组件和父组件之间没有紧密耦合; 他们是完全分开的.只要其接口(props,events,slots等)不变,您就可以根据需要修改子组件的代码.
• 缺点可能是父组件是与儿童完全独立的组件; 它不会从子组件继承任何道具,事件,插槽(任何东西).

如果您担心使用组合方法获得额外组件的开销,您可能希望查看功能组件.

我很少扩展组件,但是当我这样做时,这是因为我想要共享一组相关组件的共同蓝图(基本组件通常不能自行运行,我只是提取出公共代码).