Vue组件深入学习-持续更新

Vue组件-深入学习

组件的基础理解

组件是可复用的Vue实例，且带有一个名字。把公共样式和模板提取出来形成单独的组件的操作，类似于css中把共同的样式提取出来作为单独存在的css文件，待需要时直接引用。不过组件提取出来的东西有点多，相当于把一个页面拆分成了多个模块，一个组件就是一个模块，最后像搭积木一样把整个页面搭建起来。

组件的导出

组件通过export default和export导出。

export和export default：

• 相同点
  • export与export default均可用于导出常量、函数、文件、模块等。
  • 都可以使用import导入。
• 不同点
  • export可以有多个，export default只能有一个。
  • 通过export方式导出，在导入时要加{}，export default则不需要。
  • 使用export default为模块指定默认输出，导入时只需要知道文件名即可，但是使用export必须知道导出的变量或者函数等，导入时变量名需要一致。

父组件与子组件

当组件足够多时，Vue组件会组成一个组件树，其中被使用的是子组件、使用该组件的是父组件。
一个子组件可以同时拥有多个父组件，父组件可能是其他组件的子组件。
但是无论如何，组件树中的根组件只能是父组件。