VUE中的组件

vue有4大组件：1、全局组件，全局组件，就是所有 vue 实例中都可以使用的组件，全局组件可在应用的任何组件模板中使用。2、局部组件，我们使用 Vue 对象的 components 属性来实现局部组件注册，顾名思义局部组件就是只能在当前对象中使用的组件。3、嵌套组件，我们可以在一个组件中嵌套另一个组件，也就是在组件中定义 components 并且传入子组件即可。4.单个组件，通过手写类实现一个 vue demo 并且通过编写单个组件进行组件之间的组合

全局组件

在APP.Vue中,我们可以使用 Vue.extend() 函数，也可以不用，直接使用 Vue.component()来创建一个 Vue 的构造器

 局部组件

局部组件含义和使用方法

我们使用 Vue 对象的 components 属性来实现局部组件注册，顾名思义局部组件就是只能在当前对象中使用的组件。

嵌套组件

以下示例中就是嵌套在School组件中的组件

  const school = Vue.extend({
        template: `
          

          
学校名称:{{ schoolName }}
          
学校地址:{{ address }}
          

          
          
`,
        data() {
            return {
                schoolName: "学校",
                address: '地址'
            }
        },
        components: {
            student
        }
    });

4.单个组件

下面的学生组件就是一个单个组件

const student = Vue.extend({
        template: `
          

          
学生姓名:{{ studentName }}
          
学生年龄:{{ age }}
          
`,
        data() {
            return {
                studentName: '张三',
                age: 20
            }
        },
        mounted() {
            console.log(this)
        },

组件的优点

提高代码复用性：组件是可复用的实例，一个网页中某一个部分需要在多场景中使用，可以抽成一个组件进行复用，提高代码复用性。

提高开发效率：组件化开发能大幅度的提高应用开效率、测试性、复用性。

提升应用性能：合理划分组件，有助于提升应用性能，对数据频繁更新的内容单独创建一个组件。

 组件是Vue中较为重要的一个概念,想要用好Vue，组件的学习很重要