Vue.js Vue-哪一个更好？扩展组件还是嵌套组件？

我有一个下拉列表.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>
...

...

它是一个下拉组件，然后单击或将鼠标悬停在下拉列表上，下拉列表将显示/取消显示

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

第一：使用嵌套组件

    <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>

...
...
从“../dropdown”导入下拉列表；
导出默认值{
扩展：下拉列表，
...
}

我认为第一个更好。但是第二个组件比第一个少一个，性能会更好吗

---

谁能告诉我哪一种更好？

两种方法都有效，我不能说一种方法正确，另一种方法不正确，这取决于您的要求

扩展

• 如果要以某种方式修改基础组件的模板，则扩展基础组件可能会有问题（不能真正修改基础组件模板的一部分，可以保留基础模板，也可以完全重新定义它）
• 您需要确保新模板符合基本组件正常工作所需的任何要求（例如存在某些

  ref

  s，使用正确的CSS类名等）
• 基础组件和扩展组件紧密耦合

作文

• 我认为这更像是“Vue方式”
• 你可以利用插槽
• 子组件和父组件之间没有紧密耦合；它们是完全独立的。只要子组件的接口（道具、事件、插槽等）保持不变，您可以随意修改子组件的代码
• 一个缺点可能是父组件与子组件是完全独立的组件；它不会从子组件继承任何道具、事件、插槽（任何东西）

如果您担心使用组合方法产生额外组件的开销，那么您可能需要了解一下

---

我很少扩展组件，但当我扩展组件时，这是因为我想为一组相关组件共享一个公共蓝图（基本组件本身通常不起作用，我只是提取了公共代码）.

两种方法都有效，我不能说一种方法正确，另一种方法不正确，这取决于您的要求

扩展

• 如果要以某种方式修改基础组件的模板，则扩展基础组件可能会有问题（不能真正修改基础组件模板的一部分，可以保留基础模板，也可以完全重新定义它）
• 您需要确保新模板符合基本组件正常工作所需的任何要求（例如存在某些

  ref

  s，使用正确的CSS类名等）
• 基础组件和扩展组件紧密耦合

作文

• 我认为这更像是“Vue方式”
• 你可以利用插槽
• 子组件和父组件之间没有紧密耦合；它们是完全独立的。只要子组件的接口（道具、事件、插槽等）保持不变，您可以随意修改子组件的代码
• 一个缺点可能是父组件与子组件是完全独立的组件；它不会从子组件继承任何道具、事件、插槽（任何东西）

如果您担心使用组合方法产生额外组件的开销，那么您可能需要了解一下

我很少扩展组件，但当我扩展组件时，这是因为我想为一组相关组件共享一个公共蓝图（基本组件本身通常不起作用，我只是提取了公共代码）