Vue.js中子组件的用途是什么，为什么要完全创建子组件？ 单个文件组件与Vue.component：

如何解决Vue.js中子组件的用途是什么，为什么要完全创建子组件？ 单个文件组件与Vue.component：

我是vue.js的新手，我遇到了子组件，并且我知道数据是在父组件而不是子组件中呈现的，而且当需要传递数据/ props时，子组件更加灵活。 我想念的任何根本或关键原因吗？

解决方法

欢迎来到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.js进行一些更改！令人兴奋的东西，您可以跟踪并阅读beta docs。

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

• From Vue 2 to Vue 3
• Intro to Vue 3
• Vue 3 Composition API（听起来很吓人，但真的很简单地解释了，并且仅介绍了Vue 3的要点，而不仅仅是Composition API-令人迷惑的标题haha）！

希望这会有所帮助！ ：D

,

将组件视为可以与Legos组合在一起的通用功能是很有帮助的。 “父”和“子”组件之间并没有真正的区别，只是组件可以相互嵌套。因此，真正的问题是这种嵌套和模块化是否有用。

在Vue中，它与一般软件没有什么不同。模块化代码的好处已被充分证明，但重点是：

• 重复使用
• 诚信
• 关注点分离

如果您想重用某些功能，请使其成为组件而不是复制/粘贴。如果您发现代码变得很长，以至于令人困惑且难以导航，请将其分解为单独文件中的逻辑组件。如果您发现某些情况下逻辑上应该完成一项工作（例如对话框）的情况，那么就可以将其作为自己的组件，而不是将其混入其他代码中。

总而言之，您可能拥有一个仅包含一个大组件的应用程序。但是，除了琐碎的应用程序之外，任何大小适中和复杂的应用程序都将受益。