vue注册组件使用的详细说明

一.导言

组件系统是Vue.js的重要概念之一，它提供了一个抽象，这样我们就可以使用独立的可重用的小组件来构建大规模的应用程序，任何类型的应用程序接口都可以抽象为一个组件树

那么什么是组件呢？

组件可以扩展HTML元素并封装可重用的HTML代码。我们可以将组件视为定制的HTML元素。

二、如何注册组件

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

代码演示了以下三个步骤

！DOCTYPE htmlhtml正文div id='app '！-注意：#app是Vue实例挂载的元素，组件应该在挂载的元素范围内使用-my-component/my-component/div/body script src=' http :https://cdn . jsdeliver . net/NPM/Vue/dist/Vue . js '/script script！-1.创建一个组件构造器-var my component=vue . extend({ template : ' div这是我的第一个组件！/div' })！-2.注册组件并指定组件的标签。组件的HTML标签是my-component-vue.component(' my-component '，my component)！-3.按id=app-newvue ({el:' # app'})装载；/script/html运行如下：

一、全球注册和本地注册

当调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以在任何Vue实例下使用。如果不需要全局注册，或者组件用在其他组件中，可以使用option对象的components属性实现本地注册。

我自己的理解是，只要是组件，就代表全局组件，组件代表局部组件

以上示例可以更改为本地注册：

！DOCTYPE htmlhtml正文div id='app '！- 3.my-component只能在# app-my-component/my-component/div/body script src=' http : js/vue . js '/script script//1下使用。创建一个组件构造函数var my component=vue . extend({ template : ' div)这是我的第一个组件！/div'})新Vue ({el:' # app '，components 3360 {//2。将myComponent注册到vue实例下的“my-component”: my component } })；/script/html由于my-component组件是在与#app元素对应的Vue实例下注册的，因此不能在其他Vue实例下使用。

div id='app2 '！-您不能使用my-component组件，因为my-component是本地组件，属于# app-my-component/my-component/div script new vue({ El : ' # app 2 ' })；/脚本二。组件注册语法糖

注册上述组件的方式有点麻烦。为了简化这个过程，Vue.js提供了注册语法糖

//全局注册，my-component1是标签名vue.component ('my-component1 '，{template:' div这是第一个组件！/div ' })varv m1=new vue({ El : ' # app 1 ' })vue.component()的第一个参数是标记名，第二个参数是选项对象，组件模板由选项对象的template属性定义。这样，Vue会自动调用其后面的Vue.extend()。

组件实现本地注册

Varvm2=newvue ({el:' # app2 '，components 3360 {//在本地注册，my-components 2是标签名' my-components 2 ' : { template 3360 ' div这是第二个组件！/div' }，//部分注册，my-component3是标签名' my-component 3 ' : { template 3360 ' div这是第三个组件！/div'} }}三。父组件和子组件

我们可以定义和使用组件中的其他组件，这构成了父子组件关系。

！DOCTYPE html html body div id=' app ' parent-component/parent-component/div/body script src=' http :3359 cdn . jsdeliver . net/NPM/vue/dist/vue . js '/script script var Child=vue . extend({ template : ' pThis是子组件！/p' }) var Parent=Vue.extend({ //使用子组件标记模板：' his是父组件/pchild-component/Child-component '中的父组件，components 3360 {//部分注册Child component，只能使用' Child-component ' 3360 Child } })//全局注册Parent component vue.component(' Parent-component '，Parent)new vue({ El 3360 ' # app ' })/script/。

第四，使用脚本或模板标签

虽然语法糖简化了组件注册，但是在模板选项中拼接HTML元素比较麻烦，导致HTML和JavaScript之间耦合度高。幸运的是，Vue.js提供了两种方法来分离JavaScript中定义的HTML模板。

！doctype html lang=' en ' head meta charset=' utf-8 ' title vue组件/title script src=' http : js/vue . js '/script/head body div ID=' app1 ' My-com/My-commy-com 1/My-com 1/div模板ID=' mycom' div这是一个由模板标签/div/template script Type=' text/x-template ' ID=' My m1 ' div构建的组件这是一个由脚本标签/div/script脚本构建的组件var app1=new Vue({ el: '#app1 '，components : { ' my-com ' : { template : ' # myCom ' } } })；/脚本/正文/html运行结果：

注意：使用脚本标签时，类型指定为text/x-template，意思是告诉浏览器这不是js脚本，浏览器在解析HTML文档时会忽略脚本标签中定义的内容。

在了解了创建和注册组件的过程后，我建议使用脚本或模板标签来定义组件的HTML模板。这使得HTML代码和JavaScript代码分开，易于阅读和维护。

动词（verb的缩写）模板的注意事项

1.它以子标签的形式用在父组件中

Div id=' app '父组件子组件/子组件/父组件/div以上是错误的。为什么这种方式无效？因为当子组件向父组件注册时，Vue.js会编译父组件的模板，所以模板的内容已经决定了父组件将呈现的HTML。

父组件…/父组件相当于运行时，它的一些子标签只会作为普通的HTML执行。子组件/子组件不是标准的HTML标记，浏览器会直接忽略它

2.组件的模板只能有一个根元素。不允许出现以下情况。

Template: `div这是一个本地自定义组件，/div buttonhello/button `只能在当前Vue实例中使用

3.组件中的数据必须是函数

注册组件时传入的配置类似于创建Vue实例，但也有区别，其中之一是数据属性必须是函数。

这是因为如果像Vue实例一样传入一个对象，因为JS中对象类型的变量实际上保存了该对象的引用，当有多个这样的组件时，数据将被共享，导致一个组件中数据的变化导致其他组件中数据的变化。

使用返回对象的函数将在您每次使用组件时创建一个新对象，因此不会有共享数据的问题。

4.解析DOM模板

当使用DOM作为模板时(例如，在现有元素上挂载el选项)，您将受到HTML的限制，因为Vue只能在浏览器解析并标准化HTML后才能获得模板内容。特别是像ul、ol、table、select这样的元素限制了它可以包装的元素，而像option这样的一些元素只能出现在某些其他元素中

在自定义组件中使用这些受限元素会导致一些问题，例如

表我的行./my-row/table自定义组件my-row被认为是无效内容，因此在呈现时会导致错误。这时，应该使用特殊的is属性：

表tr=my-row/tr/table。也就是说，在标准的HTML中，某些元素中只能放置特定的子元素，而其他元素只能存在于特定的父元素中。例如，div不能放在table中，div不能放在tr的父元素中。因此，当使用自定义标签时，标签名称仍然是这些标签的名称，但是您可以在标签的is属性中填写自定义组件的名称。

第三，动态组件

有时，在不同组件之间动态切换非常有用，例如在多标签接口中

简单地说，几个组件放在一个挂载点下，然后根据父组件的一个变量决定显示哪个组件或者不显示哪个组件。

重要提示：在挂载点使用组件标签，然后使用v-bind:is="组件名"，会自动找到匹配的组件名。如果没有人，就不会显示

动态组件，先看案例效果：

代码演示：css代码不会被复制，如上例效果所示。

script src=' http :3359 unpkg.com/vue '/script div id=' dynamic-component-demo ' class=' demo ' button v-for=' tab in tab ' v-bind : key=' tab ' v-bind : class='[' tab-button '，{ active : current tab==tab }]' v-: click=' current tab=tab ' { tab } }/button component v-bind 333330

这里，v-bind:class和on:click用于更改样式。

关键是组件标签。

Script //显示三个组件Vue.component('tab-科长'，{template: 'div总共有100个科长/div' }) Vue.component('tab-科长'，{template3360' div有50个主任/div' }) Vue.component('tab-主任'，{template3360' div有10个主任/div ' })new vue({ El : ' # dynamic-component-demo '，Data: { current TTAcurrenttab

以上是边肖介绍的vue注册组件使用的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！