写在前面,无论是Vue还是React,都有一个组件的概念。顾名思义,组件是可以与其他对象组合的对象。在前端页面开发过程中,一个页面被分成小的模块,每个模块单独定义,每个模块都是一个组件。组件也可以重复使用。页面A和页面B有相似的模块,可以抽取成部分可修改的组件。组件化的理念让前端页面开发有了更清晰的结构。Vue中的组件是Vue的实例对象。因此,Vue组件的构造选项与newVue()方法构造的Vue实例的构造选项相同,可接受的构造选项相同。除了根实例特定的选项,如el。但是,Vue组件必须是可重用的。因此构造选项中的数据选项必须是一个返回对象的函数。为什么data选项是一个返回对象的函数来保证组件的复用性?因为无论是通过newVue()的方式创建Vue实例,还是定义Vue组件,其执行的操作都是直接将构造选项中的各个属性的值赋值给新创建的Vue实例对象。组件复用是指Vue使用同一个构造选项构造多个同名不同地址的Vue实例对象。如果Vue组件定义的构造选项中的data选项是一个对象,那么在组件复用时,多个组件会共享一个data数据对象,因为data对象的地址是直接赋值给组件的Vue实例的.但是如果定义组件时的数据选项是一个函数,那么Vue会在创建组件时根据构造选项执行该函数得到一个对象。这样每次创建Vue实例都会重新生成data对象,所以多个组件都有自己的data数据对象,不会互相影响。实际上,在注册组件的时候,定义了组件的构造选项,在使用组件的时候,才真正创建了对应的Vue组件实例。1全局注册全局注册的组件可以在Vue根实例和所有子组件中使用。注册入口为Vue.component()函数,一次注册,随时使用。注册方法如下:vue.component('my-component-name',{options})示例如下://main.js//本示例在vue-cli创建的项目是非-默认完整版vue,不能使用template选项,所以使用render函数来编写组件内容。Vue.component('all-test',{data(){return{x:'我是一个全局组件'}},render(h){returnh('div',this.x)}})//global注册的组件可以直接使用//App.vue