VUE中的组件

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

全局组件

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

<div id="app">
<runoob></runoob>
</div>
<script>//注册
Vue.component('runoob',{
template:<h1>自定义组件!</h1>
})
2// 创建根实例
new Vue({
el:'#app'
})
</script>

 局部组件

局部组件含义和使用方法

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

<div id="app">
<runoob></runoob>
</div>

<script>
var Child = {
template: '<h1>自定义组件!</h1>'
}
// 创建根实例
new Vue({
el:#app'，
components: {
// <runoob> 将只在父模板可用
    'runoob': Child
}
</script>

嵌套组件

以下示例中<Student></student>就是嵌套在School组件中的组件

  const school = Vue.extend({
        template: `
          <div>
          <h2>学校名称:{{ schoolName }}</h2>
          <h2>学校地址:{{ address }}</h2>
          <hr/>
          <student></student>
          </div>`,
        data() {
            return {
                schoolName: "学校",
                address: '地址'
            }
        },
        components: {
            student
        }
    });

4.单个组件

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

const student = Vue.extend({
        template: `
          <div>
          <h2>学生姓名:{{ studentName }}</h2>
          <h2>学生年龄:{{ age }}</h2>
          </div>`,
        data() {
            return {
                studentName: '张三',
                age: 20
            }
        },
        mounted() {
            console.log(this)
        },

组件的优点

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

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

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

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