Vue.js2.x之组件定义和注册的示例分析

这篇文章给大家分享的是有关Vue.js 2.x之组件定义和注册的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联公司2013年开创至今，是专业互联网技术服务公司，拥有项目成都做网站、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元泾川做网站,已为上家服务,为泾川各地企业和个人服务,联系电话:18980820575

前言

什么是组件

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

模块化和组件化的区别

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件的定义和注册

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

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

写法一

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

代码举例：




 
 
 
 Document

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

运行结果如下：

Vue.js 2.x之组件定义和注册的示例分析

代码截图如下：

Vue.js 2.x之组件定义和注册的示例分析

上图中，注意两点：

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

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

 
Vue.component('my')

注意2、绿框部分，一定要用一个大的根元素（例如

）包裹起来。如果我写成下面这样，就没有预期的效果：

   template: '登录页面
 注册页面
'

结果如下：（并非预期的效果）

Vue.js 2.x之组件定义和注册的示例分析

写法二

写法二：Vue.component方法定义、注册组件（一步到位）。

代码如下：




 
 
 
 Document

代码截图如下：

Vue.js 2.x之组件定义和注册的示例分析

上图中，同样注意两点：

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

2、绿框部分，一定要用一个大的根元素（例如

）包裹起来。如果我写成下面这样，就没有预期的效果：

   template: '登录页面
 注册页面
'

结果如下：（并非预期的效果）

Vue.js 2.x之组件定义和注册的示例分析

写法三

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

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

代码如下：




 
 
 
 Document
 


 
 
  
   登录页面
   注册页面

代码截图如下：

Vue.js 2.x之组件定义和注册的示例分析

写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了

上方代码所示，我们在account组件中添加的data 和 methods，其作用域只限于account组件里，保证独立性。

注意，在为组件添加数据时，data不再是对象了，而是function，而且要通过 return的形式进行返回；否则，页面上是无法看到效果的。通过 function返回对象的形式来定义data，作用是：

上方代码中，组件被调用了两次（不像根组件那样只能调用一次），但是每个组件里的数据 myData是各自独立的，不产生冲突。

换而言之，通过函数返回对象的目的，是为了让每个组件都有自己独立的数据存储，而不应该共享一套数据。

Document 登录注册

Document

Document 登录注册

新网创想网站建设，新征程启航

Vue.js2.x之组件定义和注册的示例分析

登录页面

注册页面

登录页面

注册页面

登录页面

注册页面

这是私有的login组件

登录页面

注册页面

{{count}}

{{count}}

其他资讯