VUE学习08--VUE使用组件来复用页面内容

    组件化是VUE的一大特性，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树。

    简单来说，有了组件化设计，我们可以实现部分页面的复用，比如我们定义一个header.vue，然后多个页面中都可以引用这个header.vue，这样使代码量更少，更简洁。当然对程序员自身的设计能力也有了更高的要求。

    下面来说说组件应该如何定义和使用。

        1.首先我们需要把组件页面开发完成。

        2.在需要引入组件的页面中将组件页面引入。

        3.在需要引入组件的页面中将组件页面挂载。

        4.在需要引入组件的页面中使用组件页面。

下面是代码举例说明：

1.在vue项目中src下新建一个目录component,一般组件页面都会放到这个目录下。

2.在component目录下创建并开发头部组件页面Header.vue。

3.在component目录下创建并开发新闻组件页面News.vue中引入头部组件Header.vue。

4.在根页面App.vue中引入新闻组件News.vue。

5.启动项目预览效果。

可以看到页面结构是根组件内包含新闻组件，新闻组件内头部组件。 这样就是组件的基本使用。大家可以按需进行组件的设计。

 

喜欢的朋友欢迎点赞，评论，关注哦~~