day08/上午/147-尚硅谷-尚融宝-组件的概念

那这堂课呢，我们要讲的是view的组件，这部分的内容呢，大家作为一个了解啊，掌握就可以了，那首先呢，我们先来说一下什么是VIVO的组件，组件呢，它的英文名是component啊，那它是VIVO JS当中其实是最强大的功能之一了啊，现在我们在前端页面当中看到的所有的内容都是由组件构成的啊，包括登录页的内容。这个就是一个登录页组件哈，然后登录页组件里面呢，包含表单组件，表单组件里面呢，包含文本框组件啊，然后这里面呢，还包含按钮组件，文本框里面呢还包含呃，这个图标组件啊，所以大家呢，可以发现，其实组件呢，在我们的view GS当中就可以理解为页面当中的某一块元素，或者是某一大块元素，或者是这一大块元素当中的一小块元素，对不对？所以呢，组件的概念你可以把它理解为这张图啊，这张图呢表示的就是我们整个页面啊，它是一个页面组件。

然后页面组件里面呢，可能有。这个啊，标题栏组件是吧，可能有主内容区域组建，可能有侧边栏组件啊，然后主内容区域组件里面呢，比如说可能有列表组件啊，有分页组件啊，然后侧边栏组件里面呢，可能有导航组件啊，有另外的啊，很多导航组件这样哈，所以呢，这个组件和组件之间呢，就构成了一颗类似于组件树这样的一个东西，我们管最顶层的这个叫父组件啊，父组件下面呢叫子组件是吧，他们之间呢，是父子关系。然后子组件下面呢，可能还有子组件，那就是父子孙关系了，是吧，所以呢，整个的组件他们用这种方式结合起来，形成一个组件数，然后呢，整个的组件数啊，然后呢，用一种逻辑的方式组织起来，互相嵌套，或者是互相调用，或者是互相依赖，来构成一个大型的应用。那么我们会发现呢，有一些小组件，它可能是现成的，比如说button组件，它是一个在element UI当中已经给咱们定义好的一个组件了，那这个就是button组件，咱们拿过来就直接用。那有一些组件呢，它是由小组件构成的，稍微大一点的组件，比如说一个table组件，那table组件里面可能会包含什么，像这个行标题呀，啊，单元格内容啊。

对吧，超连接呀按钮啊，那这个呢，就是我们所说的稍微大一点的组件了，还有一些组件呢，可能更为完整一些，比如说像昨天我们看到的登陆页组件。

或者是我们昨天创建的啊，列表组件list，或者是我们昨天创建的表单组件form，那这些都是我们自己创建的组件，它包含了一些啊，就是在element UI里面我们嵌入的一些组件，所以无论是现成的组件，还是我们自己创建的组件，那么它们呢，都是组件的一种啊，然后呢，们合起来构成一个大型应用啊，所以说呢，这个就是我们所说的组件的概念，有一些组件我们创建出来之后呢，可能会重用，比如说像这个导航组件。啊，它里面包含着很多超链接组件，包含很多标题组件，包含很多折叠按钮组件，然后那我们呢，这个导航组件呢，就可以放在某一些其他的地方对它进行重用，这样的话，我们很多页面里面就都会有相同的导航啊，所以这个呢，组件呢，也是我们封装可重用代码的啊，一个解决方案，一个手段啊，所以这个是组件的概念。