Vue组件的创建与使用

Vue组件的定义

组件系统是Vue的另一个重要的概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

组件就是一段独立的，能代表页面某一部分的代码片段，

组件的好处

1、提高开发效率

2、方便重复使用

3、便于协同开发

4、更容易被管理和维护

组件创建的基本步骤

Vue.js的组件的使用有3个步骤：创建组件构造器、注册组件和使用组件

1、调用Vue.extend()方法创建组件构造器

2、调用Vue.component()方法注册组件

3、在Vue实例的作用范围内使用组件

代码

理解组件的创建和注册

1、Vue.extend() 是Vue构造器扩展，调用Vue.extend()创建的是一个组件构造器，而不是具体的组件实例。

2、Vue.extend()构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML模板。

3、使用Vue.component()注册组件时，需要提供2个参数，第一个参数是组件的名称，第二个参数是组件构造器。

4、Vue.component()方法内部会调用组件构造器，创建一个组件实例。

直接通过选项对象创建组件

其实所有的Vue的组件同时也都是Vue的实例

所以组件可接受的相同选项对象

因此我们在创建组件的过程中也就没有必要每次都通过构造器扩展Vue构造函数

直接把构造器的选项对象作为第二个参数传递给Vue.component就可以了。

如果不被创建为组件，那么这就是一个普通对象

如果被创建为组件，这就是一个选项对象

let   com  =  {

       data()  {

           return {

                 num : 1,

          }

       },

      template: '<h2 @click="change">{{ num }} </h2>',

      computed: {},

      methods: {

            change() {

                   this.num++

             }

     },

    watch:{},

    mounted() {}

}