## 一、概述 组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树。组件是可复用的 Vue 实例 Vue 组件非常类似于**自定义元素**——它是[Web 组件规范](https://www.w3.org/wiki/WebComponents/)的一部分； 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素，封装可重用代码； ● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能； ● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素； ● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周期钩子； ## 二、vue组件的功能 1）能够把页面抽象成多个相对独立的模块 2）实现代码重用，提高开发效率和代码质量，使得代码易于维护 ## 三、Vue组件封装过程 ### 1，使用Vue.extend()定义一个组件； 调用Vue.extend()，创建名为myCom的组件； ``` var myCom = Vue.extend({ template: '<div>这是我的组件</div>' }) ``` `<template> `标签创建，需要加上id属性； ``` <template id="myCom"> <div>这是template标签构建的组件</div> </template> ``` `<script type='text/x-template' id='myCom'> `创建； ``` <script type="text/x-template" id="myCom1"> <div>这是script标签构建的组件</div> </script> ``` ### 2，使用Vue.component()方法注册组件，有2中方法，全局注册，局部注册； 全局注册：一次注册( 调用Vue.component( 组件名称，为组件创建时定义的变量 ) )，可在多个Vue实例中使用。 ``` Vue.component('my-com',myCom) ``` 全局注册语法糖：不需要创建直接注册的写法 ``` Vue.component('my-com',{ 'template':'<div>这是我的组件</div>' }) ``` 局部注册：只能在注册该组件的实例中使用，一处注册，一处使用； ``` var app = new Vue({ el: '#app', components: { 'my-com': myCom } }) ``` 局部注册语法糖： ``` var app = new Vue({ el: '#app', components: { 'my-com': { template: '<div>这是我的组件</div>' } } }) ``` ### 3，如果子组件需要数据，可以在props中接受定义； ### 4，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法； 在 Vue 中注册组件很简单： ``` // 定义名为 mycomponent 的新组件 Vue.component('mycomponent , { ... }) var app = new Vue(...) ``` 注册完之后，就可以使用了： ## 四、使用 只需要在调用组件的地方，写上组件名字的标签即可； ``` <div> /*调用组件*/ <my-com></my-com> </div> ``` ## 五、实例 注册组件： ``` Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } }) ``` ``` <div id="app-7"> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item> </ol> </div> ```