vue.js指令与组件的用例？

什么时候应该在vue.js中使用指令与组件？我正在从Bootstrap实现一些东西，看起来我可以用任何一种方式（我从下拉菜单开始）

---

我觉得指令更适合于在单个元素上操作dom，而组件则用于打包一组数据和/或dom操作。这是一个很好的方法吗？

重用性是使用指令的一个原因

虽然组件也在创建可重用的“小部件”，但同一个html系统中的两个组件将覆盖前面的“数据”，所以在这种情况下请考虑指令

---

另一个值得考虑的问题是——用户是否只能在经过一些说明后才能通过HTML使用它？

我这样认为：

组件定义小部件-这些是html的一部分，具有与之相关的行为

---

指令修改html部分的行为（可能是也可能不是小部件）。

这个堆栈溢出问题是Google查询“vue指令vs组件”的第一个结果。Saurshaz的答案目前是公认的，在VUE2.0中是非常错误的。我想这会让很多人误入歧途，所以我要在这里称一称

对于“我应该在Vue中使用指令还是组件”的回答几乎总是一个组件。

你想拥有可重用的HTML吗？即可重用的小部件？然后使用一个组件。您希望其中两个小部件具有离散数据吗？然后使用一个组件。其中一个的数据不会覆盖另一个的数据。也许这在Vue 1.0中是真的，我不知道。但在VUE2.0中这绝对不是真的。在Vue 2.0中，您的组件有一个

data

函数，该函数返回一组唯一的数据。考虑一个VUE下拉的实际生活，它有一个类似于UI引导下拉的HTML标记：

语法应该是这样的：

---

这不仅很笨拙，而且因为组件代码需要实现

语法才能获得innerHTML，而且插槽不能是

声明的直接子项（因为无法保证插槽标记在其顶层有一个入口节点），这意味着

v-for

的组件定义中必须有一个围绕的顶级元素。因此DOM将变得比需要的更深。在这里，指令无疑是正确的选择

我认为用两个例子可以更好地解释这种差异

• 组件：是最适合在需要在某些内容上插入（或添加）您自己的HTML标记以呈现它时使用的包装器。例如，小部件、自定义按钮等，需要添加一些HTML标记才能正确显示

• 指令：不添加标记，而是让您直接访问HTML标记（您已向其添加了指令）。这使您可以直接修改该HTML元素的属性。例如，初始化工具提示、设置css样式、绑定到事件等

<a v-for="link in links" :href="link.href">link.anchor</a>