Vue.js 中的子组件有啥用，为啥要创建子组件？

Posted 2023-02-23

【中文标题】Vue.js 中的子组件有啥用，为啥要创建子组件？

【英文标题】：What is the use of a child component in Vue.js ,why create child components at all?Vue.js 中的子组件有什么用，为什么要创建子组件？

【发布时间】：2020-12-02 20:17:50

【问题描述】：

我是 vue.js 的新手，我遇到过子组件，我知道数据是在父组件中呈现的，而不是在子组件中，当需要传递数据 /props 时，子组件也更加灵活。 我缺少任何基本或关键原因？

【问题讨论】：

可能相关：***.com/questions/58242512

【参考方案1】：

将组件视为可以像乐高积木一样组合在一起的通用功能块会有所帮助。 “父”和“子”组件之间并没有真正的区别，只是组件可以相互嵌套。所以真正的问题是这种嵌套和模块化是否有用。

在 Vue 中与在一般软件中没有什么不同。模块化代码的好处有据可查，但重点是：

重用 易读性 关注点分离

如果您发现自己想要重用某些功能，请将其作为组件而不是复制/粘贴。如果您发现您的代码变得非常长，以至于令人困惑且难以导航，请将其分解为单独文件中的逻辑组件。如果您发现某些情况在逻辑上应该有一个工作，例如对话框，那么它是一个很好的候选者，可以作为自己的组件，而不是混入其他代码。

总而言之，您可以拥有一个只有一个大组件的应用程序。但除了琐碎的应用程序之外，任何中等大小和复杂性的应用程序都会受益。

【参考方案2】：

欢迎来到 Vue.js 的世界！ :D

您基本上掌握了组件的要点！如果您以纯粹的分层方式考虑子组件（数据向上和向下传递给它，并且它可能与父组件/实例相关），那么子组件会令人困惑。无聊吧？对我有用（我也在学习！）是这样想的：

单文件组件与 Vue.component：

您在网站上有一个导航栏，但您希望将该代码“隔离”或“封装”到它自己的组中，而不是将其编织到导航栏所在的其他代码中，例如主页（或全局在 App.vue 中 - 尽管导航栏作为全局元素更好！）。这有助于模块化您的代码并在应用程序的任何位置重用该代码，使其能够比使用 Vue.component 定义它们更好。如果这仍然令人困惑，请查看 Medium article on using Vue.js single-file components and why you want to use them。

对我来说，我通常总是使用单文件组件，因为它更容易在我的代码中定义我想要的位置，而且层次结构对我来说更清晰（即什么是孩子，什么是父母）！然后我可以在任何我想要的地方重用该代码！

这可以使组件嵌套在组件中（超级酷）-How to Nest Components in Vue，以及一如既往的Vue.js docs on Component Basics（在“组织组件”下向下滚动一点）。

总体而言：无论您以哪种方式定义组件，您在主题行中所说的内容仍然适用！确实是单文件组件提供的可扩展性和可重用性使它们比仅使用 Vue.component 更好：D

注意：

在 Vue.js 的

主要版本 Vue 3

之后会有一些变化！令人兴奋的东西，您可以跟踪并阅读beta docs。

为了学习 Vue 3，我强烈推荐 Vue Mastery 的课程：

From Vue 2 to Vue 3 Intro to Vue 3 Vue 3 Composition API（听起来很吓人，但它真的很简单地解释了，并且只介绍了 Vue 3 的基本要素，而不仅仅是 Composition API - 误导性标题哈哈）！

希望这会有所帮助！ :D

【讨论】：

谢谢你，我正在关注 vue-mastery 课程以及你会为 Vue js 3 推荐的任何书籍？我找不到任何东西。谢谢

@adityalokesh 嘿，别担心！嗯，我真的会推荐 Flavio Copes 的免费 (flaviocopes.com) Vue 手册！它在 Vue 2 中（但这些东西仍然适用！），他全面了解了 Vue。他确实有其他免费的令人惊叹的手册！或者，Vue Mastery 自己的 Vue 备忘单 (vuemastery.com/vue-cheat-sheet)！另外，如果我的回答有帮助，您可以点赞，让其他人看到！