Vue组件-深入学习
组件的基础理解
组件是可复用的Vue实例,且带有一个名字。把公共样式和模板提取出来形成单独的组件的操作,类似于css中把共同的样式提取出来作为单独存在的css文件,待需要时直接引用。不过组件提取出来的东西有点多,相当于把一个页面拆分成了多个模块,一个组件就是一个模块,最后像搭积木一样把整个页面搭建起来。
组件的导出
组件通过export default和export导出。
export和export default:
- 相同点
- export与export default均可用于导出常量、函数、文件、模块等。
- 都可以使用import导入。
- 不同点
- export可以有多个,export default只能有一个。
- 通过export方式导出,在导入时要加{},export default则不需要。
- 使用export default为模块指定默认输出,导入时只需要知道文件名即可,但是使用export必须知道导出的变量或者函数等,导入时变量名需要一致。
父组件与子组件
当组件足够多时,Vue组件会组成一个组件树,其中被使用的是子组件、使用该组件的是父组件。
一个子组件可以同时拥有多个父组件,父组件可能是其他组件的子组件。
但是无论如何,组件树中的根组件只能是父组件。