Vue.js 2.x之组件的定义和注册图文详解

组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。

模块化和组件化的区别

模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一

组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用

全局组件的定义和注册

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

全局组件的定义和注册有三种方式,我们接下来讲一讲。

写法一

写法一:使用Vue.extend方法定义组件,使用 Vue.component方法注册组件。

代码举例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://www.jb51.net/vue2.5.16.js"></script> </head> <body> <div> <!-- 如果要使用组件,直接把组件的名称,以 HTML 标签的形式,引入到页面中,即可 --> <account> </account> </div> <script> //第一步:使用 Vue.extend 定义组件 var myAccount = Vue.extend({ template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // 通过 template 属性,指定了组件要展示的HTML结构。template 是 Vue 中的关键字,不能改。 }); //第二步:使用 Vue.component 注册组件 // Vue.component('组件的名称', 创建出来的组件模板对象) Vue.component('account', myAccount); //第一个参数是组件的名称(标签名),第二个参数是模板对象 new Vue({ el: '#app' }); </script> </body> </html>

上方代码中,在注册组件时,第一个参数是标签名,第二个参数是组件的定义。

运行结果如下:

代码截图如下:

上图中,注意两点:

注意1、红框部分,要保证二者的名字是一致的。如果在注册时,组件的名称是驼峰命名,比如:

Vue.component('myComponent', myAccount); //第一个参数是组件的名称(标签名),第二个参数是模板对象
那么,在标签中使用组件时,需要把大写的驼峰改为小写的字母,同时两个单词之间使用-进行连接:

<my-component> </my-component> Vue.component('my')

注意2、绿框部分,一定要用一个大的根元素(例如<div>)包裹起来。如果我写成下面这样,就没有预期的效果:

template: '<h2>登录页面</h2> <h3>注册页面</h3>'

结果如下:(并非预期的效果)

写法二

写法二:Vue.component方法定义、注册组件(一步到位)。

代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://www.jb51.net/vue2.5.16.js"></script> </head> <body> <div> <account> </account> </div> <script> //定义、注册组件:第一个参数是组件的名称(标签名),第二个参数是组件的定义 Vue.component('account', { template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字,不能改。 }); new Vue({ el: '#app' }); </script> </body> </html>

代码截图如下:

上图中,同样注意两点:

1、红框部分,要保证二者的名字是一致的。

2、绿框部分,一定要用一个大的根元素(例如<div>)包裹起来。如果我写成下面这样,就没有预期的效果:

template: '<h2>登录页面</h2> <h3>注册页面</h3>'

结果如下:(并非预期的效果)

写法三

上面的写法一、写法二并不是很智能,因为在定义模板的时候,没有智能提示和高亮,容易出错。我们不妨来看看写法三。

写法三:将组件内容定义到template标签中去。

代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/fc89264d959a7196955e5d8856606b05.html