什么是组件：组件是Vue.js最强大的功能之一组件可以扩展HTML元素，封装可重用的代码。在更高的层次上，组件是一个自定义元素，Vue.js的编译器为其添加了特殊的功能。在某些情况下，组件也可以是本机HTML元素的形式，这些元素通过is特性进行扩展。

如何注册组件？

您需要使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册该组件。Vue.extend方法的格式如下：

var my component=Vue . extend({//option.稍后介绍})如果您想在其他地方使用这个创建的组件，您必须有一个组件名：

Vue.component('my-component '，MyComponent)

命名后，您可以像DOM元素一样在HTML标记中使用这个程序集名称。让我们看一下组件注册和使用的完整示例。

Html代码：

div id=' example ' my-component/my-component/div js代码：

//定义var my component=vue . extend({ template : ' diva自定义组件！/div'})//注册vue.component ('my-component '，my component)//创建根实例new Vue({ el: '#example'})输出结果：

div id='example' divA自定义组件！/div/div嵌套组件也可以包含组件本身，下面的父组件包含一个名为子组件的组件，但是这个组件只能由父组件：使用

var child=Vue . extend({ template : ' DiVA自定义组件！/div ' })；var parent=Vue . extend({ template : ' DivParent component :子组件/子组件/div '，components : { ' child-component ' : child } })；vue.component(' parent-component '，parent)；上面的定义过程比较繁琐，不需要每次都调用Vue.component和Vue.extend方法：

//扩展并注册vue.component ('my-component '，{template3360' diva自定义组件！/div'})//对于本地注册也可以这样做。var parent=vue . extend({ components : { ' my-component ' : { template : ' diva自定义组件！/div'} }})动态组件

多个组件可以使用同一个挂载点，然后在它们之间动态切换。使用保留的组件元素动态绑定到其is属性。以下几列在同一个vue实例下挂起三个组件：主页、帖子和存档，并通过currentView功能动态切换组件的显示。

Html代码：

div id=' dynamic ' button id=' home ' home/button button id=' post ' post/button button id=' archive ' archive/button br component 3360 is=' current view '/component/div js代码：

var Vue=new Vue({ El : ' # dynamic '，data : { currentview : ' Home ' }，components : { Home : { template : ' Home ' }，post s : { template : ' post ' }，Archive : { template : ' Archive ' } })；document.getElementById('home ')。onclick=function(){ vue . currentview=' home '；};document . getelementbyid(' post ')。onclick=function(){ vue . currentview=' post '；};document . getelementbyid(' archive ')。onclick=function(){ vue . currentview=' archive '；};组件和v-formy-组件v-for=' items in item '/my-component

您不能将数据传递给组件，因为组件的范围是独立的。要将数据传递给组件，应该使用props:

my-component v-for=' items in items ' : item=' item ' : index=' $ index '/my-component

项目不会自动注入组件的原因是，它会导致组件与当前的v-for紧密耦合。显式声明数据的来源允许组件在其他地方重用。

深度响应原则

当组件绑定数据时，绑定如何有效，属性如何动态修改和添加？看下面的原理介绍。

如何跟踪变化：将一个不同的对象作为数据的选项传递给vue实例，vue.js将遍历其属性，并将其转换为带有Object.defineProperty的getter/setter这是ES5的一个特性，所有vue.js都不支持IE8或更早版本。

模板中的每个指令/数据绑定都有一个对应的观察器对象，该对象将属性记录为计算过程中的依赖项。稍后，当调用依赖设置器时，它将触发观察器重新计算。流程如下：

变化检测问题：vue.js不能检测到对象属性的添加或删除，属性必须在数据上才能让vue.js转换它为吸气剂/设置剂模式，才能有响应。例如：

定义变量数据={ a : 1 }；var VM=new Vue({ data : data })；//`vm.a `和数据现在是响应的vm.b=2//`vm.b '不是响应的数据。b=2/`数据。b `不是响应的不过，也有办法在实例创建后添加属性并且让它是相应的。可以使用设置（键、值)实例方法：

虚拟机set('b '，2)//`vm.b '和` data.b '现在是响应的

对于普通对象可以使用全局方法：Vue.set(对象、键、值):Vue.set(数据，' c '，3)/' VM。c和` data.c '现在是响应的

初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在数据对象上声明所有的相应属性。

不这么做：

var VM=new Vue({ template : ' div { { msg } }/div ' })//然后添加` msg`vm .$set('msg '，' Hello！')应该这么做：

var vm=new Vue({ data: { //以一个空值声明` msg` msg: '' }，模板： ' div { { msg } }/div ' })//然后设置` msg`vm.msg='Hello！'组件完整案例下面介绍的例子实现了模态窗口功能，代码也比较简单。

超文本标记语言代码：

！-实现脚本定义一个模板-脚本类型=' x/template ' id=' modal-template '！-模板是否显示通过v-show='show '来设置，过渡设置动画效果-div class=' modal-mask ' v-show=' show ' transition=' modal ' div class=' modal-wrapper ' div class=' modal-container ' div class=' modal-header '！插槽相当于页眉占位符-插槽名称=“标头”默认标头/slot/div class=' modal-body '！插槽相当于身体占位符-插槽名称='body '默认body/slot/div class=' modal-footer '！插槽相当于页脚占位符-槽名='页脚'默认页脚/槽按钮类='模式-默认-按钮@ click=' show=false ' ok/button/div/div/script div id=' app '！-点击按钮时设置某视频剪辑软件实例特性showModal的值为true-button id=' show-modal ' @ click=' show modal=true ' show modal/button！-莫代尔是自定义的一个插件，插件的特性显示绑定某视频剪辑软件实例的showModal特性-model : show。sync='显示模式'！-替换情态的插件中狭槽那么为页眉的内容- h3插槽="标头"自定义标头/H3/模式/divjs代码：

//定义一个插件，名称为modalVue.component('modal '，{ //插件的模板绑定编号为模态模板的数字正射影像图元素内容template: '#modal-template '，props: { //特性，类型为布尔show:{ type:布尔值，required: true，twa wy : true } })；//实例化vue，作用域在编号为应用元素下，新Vue({ el: '#app '，data: { //特性，默认值为false show modal : false } })；钢性铸铁代码：模态掩码{位置：固定；z指数： 9998；top : 0；左： 0；宽度： 100%;高度： 100%;背景-color: rgba(0，0，0，5);显示器：表；过渡：不透明度。3s容易；}.模态包装器{显示：表格单元格；垂直对齐： 中间；}.modal-container { width : 300 px；余量： 0px自动；padding: 20px 30px背景-color : # fff；边界半径： 2pxbox-shadow: 0 2px 8px rgba(0，0，0，33);阿里亚尔Helvetica : all . 3s ease font-family : transit，无衬线；}.modal-header H3 { margin-top : 0；color: # 42b983}。模态体{边距： 20px 0；}.模式-默认-按钮{右侧浮动：}/**当Vue.js切换*元素的可见性时，以下样式会自动应用于带有* v-transition=" model "的元素，* * *通过编辑*这些样式，您可以轻松地使用模态转换.*/.模式-输入，modal-leave { opa city 3360 0；}.模式-输入。模态容器。莫代尔-离开模态容器{-WebKit-transform :比例尺(1.1);变压器：标度(1.1);}本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

由于我在项目中没有深入的使用过组件的功能，所以对组件的理解并不深刻，我的介绍也比较肤浅。感谢阅读。