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将显示/消除。

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

首先：使用嵌套组件

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

第二：使用extend

<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

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

<强>扩展

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

<强>组合物

我会说这更像是“Vue方式”。
您可以利用广告位。
子组件和父组件之间没有紧密耦合;他们是完全分开的。只要其界面（道具，事件，插槽等）不变，您就可以根据需要修改子组件的代码。
缺点可能是父组件是与儿童完全独立的组件;它不会从子组件继承任何道具，事件，插槽（任何东西）。

如果您担心使用合成方法获得额外组件的开销，您可能需要查看functional components。

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

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

1 个答案: