vue.js2.x组件定义和注册的详细说明

前言

什么是组件

组件：组件的出现是为了拆分Vue实例的代码量，这使得我们可以用不同的组件来划分不同的功能模块，将来需要什么功能的时候可以调用相应的组件。

模块化和组件化的区别

模块化：从代码逻辑的角度来划分；便于代码的分层开发，保证各功能模块的功能为单一组件：从UI界面的角度进行划分；前端组件化促进了用户界面组件的重用、全局组件的定义和注册

组件是Vue.js最强大的功能之一.组件可以扩展HTML元素并封装可重用的代码。

有三种方法可以定义和注册全局组件。接下来再说吧。

写一个

编写方法1:使用Vue.extend方法定义组件，使用Vue.component方法注册组件。

代码示例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/head dy div id=' app '！-如果要使用组件，直接将组件的名称以HTML标签的形式引入页面。yes-account/account/div script//步骤1:使用Vue.extend定义组件var my account=vue . extend({ template 3360 ' div H2登录页面/h2 h3注册页面/h3/div' //通过模板属性指定组件要显示的HTML结构。模板是Vue中的关键字，不能更改。});//第二步：用Vue.component //Vue.component('组件的名称，创建的组件模板对象)vue.component ('account '，myaccount)注册组件；//第一个参数是组件的名称(标签名)，第二个参数是模板对象new Vue({ El : ' # app ' })；在上面的代码/script/body/html中，注册组件时，第一个参数是标签名，第二个参数是组件的定义。

运行结果如下：

代码截图如下：

在上图中，请注意两点：

注1。对于红色框，请确保两者的名称相同。如果注册时组件的名称是驼峰，例如：

Vue.component('myComponent '，my account)；//第一个参数是组件的名称(标签名)，第二个参数是模板对象。然后，在使用标签中的组件时，您需要将大写的驼峰更改为小写字母，并使用-来连接两个单词：

我的组件注释2。绿色框必须用一个大的根元素(如div)包装。如果我这样写，不会有预期的效果：

Template: ' h2登录页面/h2 h3注册页面/H2 H3 '结果如下：(不是预期效果)

写两个

写作2:用Vue.component方法定义和注册组件(一步到位)。

代码如下：

！DOCTYPE html html lang=' en ' Head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/Head body div id=' app ' account/account/div script//定义并注册组件：第一个参数是组件的名称(标记名});new Vue({ El : ' # app ' })；/script/body/html代码截图如下：

在上图中，还要注意两点：

1、红框，确保两者名称一致。

2.绿色框必须用一个大的根元素(如div)包装。如果我这样写，不会有预期的效果：

Template: ' h2登录页面/h2 h3注册页面/H2 H3 '结果如下：(不是预期效果)

写作三

上面的编写方法1和编写方法2都不是很智能，因为定义模板的时候没有智能提示和高亮，容易出错。我们来看看第三个写法。

写作3:在模板标签中定义组件内容。

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/head dy！-定义模板-模板id=' myaccount' div H2登录页面/h2 h3注册页面/H3/div/模板div id='app '！-使用组件-account/account/div script//定义并注册组件Vue.component ('account '，{ template : ' # my account '/template是Vue中的关键字，不能更改。});new Vue({ El : ' # app ' })；/script/body/html代码截图如下：

编写方法3实际上与方法2类似，只是绿框的内容单独放在模板标签中，有利于html标签的编写。

使用组件定义私有组件

我们在上一段中定义的是一个全局组件，在这样做的时候可以被多个Vue实例使用。

我们可以在Vue实例中定义一个私有组件，这样做的时候，只有当前的Vue实例可以使用这个组件。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/head dy div id=' app '！-使用Vue实例内部的私有组件-my-log in/my-log in/div script new Vue({ El : ' # app }，data: {}，components 3360 {//)来定义和注册Vue实例内部的私有组件myLogin: { template: ' h3，即私有/脚本/正文/html运行效果：

当然，我们也可以将模板的定义存储在模板标签中，这样模板中的html标签就可以被智能地提示和高亮显示，避免出错。如下所示：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/head dy！-定义模板-模板id=' login tmp' H3这是一个私有登录组件/h3 /template div id='app '！-调用Vue实例内部的私有组件-my-log in/my-log in/div script new Vue({ El : ' # app }，data: {}，components 3360 {//)来定义和注册Vue实例内部的私有组件my login 3360 { template 3360 ' # log in/script/body/html具有相同的运行效果。

为组件添加数据和方法

由于组件是一个页面，因此页面中可能会动态显示一些功能。因此，有必要向组件添加数据和方法。

代码示例如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/head dy！-定义组件的模板-模板id=' myaccount' div！-在组件的模板中，调用该组件中的数据-{ { mydata } } a href=' # ' rel=' external no follow ' v-: click=' log in ' log in 1/a H2登录页面/h2 h3注册页面/h3 /div /template div id='app '！-第一次调用组件-帐户/帐户！-第二次调用组件-account/account/div script//定义并注册组件vue.component ('account '，{template3360' # myaccount '，//组件中的数据//[注意]组件中的数据不再是对象，而是方法(否则会报错)；在这个方法中，你必须返回一个对象。//组件中的数据使用方式与实例中的数据完全相同！data: function(){返回组件中的{ mydata : ' smyhvae ' }，//methods : { login 3360 function(){ alert(' log in operation ')；} } });new Vue({ El : ' # app ' })；如上面的代码/script/body/html所示，我们在account组件中添加的数据和方法的范围仅限于account组件，以确保独立性。

注意，向组件添加数据时，数据不再是对象，而是函数，必须以返回的形式返回；否则，在页面上看不到效果。该函数返回一个定义数据的对象，其功能是：

在上面的代码中，组件帐户被调用了两次(与根组件不同，它只能被调用一次)，但是每个组件中的数据myData是独立的，因此不存在冲突。

换句话说，通过函数返回对象的目的是让每个组件都有自己独立的数据存储，而不是共享一组数据。

为什么组件的数据必须是函数

让我们先看下面的例子：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2 . 5 . 16 . js '/script/head dy div id=' app '！-第一次调用组件-计数器/计数器hr！-第二次调用组件-计数器/counter /div！-定义模板-模板id=' tmpl' div输入类型=' button '值='让计数增加1 ' @ click=' increment ' H3 { { count } }/H3/div/Template脚本var dataobj={ count : 0 0 }//这是一个带有按钮的计数器的组件。每次点击按钮，数据中的计数值为1vue.component ('counter '，{template:' # tmpl '，data : function(){ return dataObj//当我们返回全局dataObj时，子组件将共享这个dataobj}，methods: {increment () {this。count } } })//创建一个Vue实例。get view model var VM=new vue({ El : ' # app '，data: {}，methods : { })；/script/body/html运行如下：

在上面的例子中，组件计数器被调用了两次。因为dataObj是一个全局对象，所以两个组件实例都可以共享这个dataObj数据。因此，我们可以通过单击任何组件实例的按钮将计数数据增加1。

现在的问题是，如果我们想要组件计数器的两个实例独立操作计数数据，我们应该怎么做？我们应该修改数据中返回内容：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2。5 .16 .js '/脚本/头dy div id=' app '计数器/计数器HR计数器/计数器/div模板id='tmpl' div输入类型='让数数加1 ' @ click=' increment ' H3 { { count } }/H3/div/模板脚本var dataObj={ count: 0 } //这是一个计数器的组件，身上有个按钮，每当点击按钮，让数据中的数数值1 Vue.component('counter '，{ template: '#tmpl '，data : function(){//return dataObj//当我们返回全局的数据对象的时候，这个数据对象是共享的返回{ count: 0 } //【重要】返回一个**新开辟**的对象数据}，方法： { increment(){ this。count } } })//创建某视频剪辑软件实例，得到ViewModel var VM=new Vue({ El : ' # app '，data: {}，methods : { })；/脚本/正文/html运行效果：

如上图所示，每当我们创建一个新的组件实例时，就会调用数据函数，数据函数里会返回一个新开辟的对象数据。这样做，就可以保证每个组件实例有独立的数据存储。

组件的切换

使用控制显示和否则结合旗进行切换

代码举例：(登录组件/注册组件，二选一)

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2。5 .16 .js '/script/head dy div id=' app '！-温馨提示：` .防止`可以阻止超链接的默认事件-a href=' ' @单击。protect=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' flag=true '登录/a a href=' ' @单击。protect=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' flag=false '注册/a！-登录组件/注册组件，同时只显示一个-登录v-if=' flag '/登录寄存器v-else=' flag '/寄存器/div脚本vue。组件('登录'，{ template: 'h3登录组件/h3' }) Vue.component('register '，{ template: 'h3注册组件/h3' }) //创建某视频剪辑软件实例，得到ViewModel var VM=new Vue({ El : ' # app '，data: { flag: false }，methods : } })；/脚本/正文/html运行效果如下：

使用某视频剪辑软件提供的成分标签实现组件切换

上面的例子中，我们是通过旗的值来进行组件的切换。但是，旗帜的值只可能有两种情况，也就是说，v-if和否则只能进行两个组件之间的切换。

那如何实现三个甚至三个以上的组件切换呢？这里，我们可以用到某视频剪辑软件提供的成分标签。

我们先来看一下成分标签的用法。

基于上面的代码，如果我想让注册组件显示出来，借助成分标签可以这样做：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2。5 .16 .js '/script/head dy div id=' app '！- Vue提供了组件，来展示对应名称的组件- !- 【重要】组件是一个占位符，` :is '属性，可以用来指定要展示的组件名称。这里，我们让注册组件显示出来-组件：is="登录"/组件/div脚本//组件名称是字符串Vue.component('login '，{ template: 'h3登录组件/h3' }) Vue.component('register '，{ template: 'h3注册组件/h3' }) //创建某视频剪辑软件实例，得到ViewModel var VM=new Vue({ El : ' # app '，数据： { comname : '登录'//当前成分中的：is绑定的组件的名称}，methods : { })；/脚本/正文/html上方代码中，提取关键代码如下：

组件：is="登录"/组件如果我想让注册组件显示出来，借助成分标签可以这样做：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2。5 .16 .js '/script/head dy div id=' app '！- Vue提供了组件，来展示对应名称的组件- !- 【重要】组件是一个占位符，` :is '属性，可以用来指定要展示的组件名称-组件：is="注册"/组件/div脚本/组件名称是字符串Vue.component('login '，{ template: 'h3登录组件/h3' }) Vue.component('register '，{ template: 'h3注册组件/h3' }) //创建某视频剪辑软件实例，得到ViewModel var VM=new Vue({ El : ' # app '，数据： { comname : '登录'//当前成分中的：is绑定的组件的名称}，methods : { })；/脚本/正文/html上方代码中，提取关键代码如下：

组件：is="寄存器"/组件因此，如果要实现组件之间的切换，我们可以给成分标签里的存在属性值设置为变量即可，来看看代码实现。

实现组件切换的完整代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title document/title script src=' http : vue 2。5 .16 .js '/script/head dy div id=' app '！-点击按钮后，设置变量` comName '为不同的值，代表着后面的成分里显示不同的组件-a href=' ' @单击。protect=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' comName=' log in ' '登录/a a href=' ' @单击。protect=' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' ComNAmE=' register ' '注册/a！- Vue提供了组件，来展示对应名称的组件- !-组件是一个占位符，is属性，可以用来指定要展示的组件的名称- !-此处的` comName '是变量，变量值为组件名称-组件：是=' ComName '/组件/div脚本//组件名称是字符串Vue.component('login '，{ template: 'h3登录组件/h3' }) Vue.component('register '，{ template: 'h3注册组件/h3' }) //创建某视频剪辑软件实例，得到ViewModel var VM=new Vue({ El : ' # app '，数据： { comname : '登录'//当前成分中的：is绑定的组件的名称}，methods : { })；/脚本/正文/html效果：

总结

以上所述是小编给大家介绍的Vue.js 2.x之组件的定义和注册图文详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！