11-Vue组件的定义和注册

前言

什么是组件

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

模块化和组件化的区别

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

  • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件的定义和注册

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

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

写法一

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

代码举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <!-- 如果要使用组件，直接把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->
  15.         <account> </account>
  16.     </div>
  18.     <script>
  19.         //第一步：使用 Vue.extend 定义组件
  20.         var myAccount = Vue.extend({
  21.             template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // 通过 template 属性，指定了组件要展示的HTML结构。template 是 Vue 中的关键字，不能改。
  22.         });
  23.         //第二步：使用 Vue.component 注册组件
  24.         // Vue.component('组件的名称', 创建出来的组件模板对象)
  25.         Vue.component('account', myAccount); //第一个参数是组件的名称（标签名），第二个参数是模板对象
  27.         new Vue({
  28.             el: '#app'
  29.         });
  30.     </script>
  31. </body>
  33. </html>

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

运行结果如下：

11-Vue组件的定义和注册 - 图1

代码截图如下：

11-Vue组件的定义和注册 - 图2

上图中，注意两点：

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

  1. Vue.component('myComponent', myAccount); //第一个参数是组件的名称（标签名），第二个参数是模板对象

那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-进行连接：

  1. <my-component> </my-component>

所以，为了避免名字不一致的问题，我们注册组件时，组件的名称可以直接写成my-component。比如：（避免驼峰不一致的建议写法）

  1.     Vue.component('my-component', myAccount);

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

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

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

11-Vue组件的定义和注册 - 图3

写法二

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

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <account> </account>
  15.     </div>
  17.     <script>
  19.         //定义、注册组件：第一个参数是组件的名称（标签名），第二个参数是组件的定义
  20.         Vue.component('account', {
  21.             template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>'   // template 是 Vue 中的关键字，不能改。
  22.         });
  24.         new Vue({
  25.             el: '#app'
  26.         });
  27.     </script>
  28. </body>
  30. </html>

代码截图如下：

11-Vue组件的定义和注册 - 图4

上图中，同样注意两点：

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

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

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

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

11-Vue组件的定义和注册 - 图5

写法三【荐】

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

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

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <!-- 定义模板 -->
  14.     <template id="myAccount">
  15.         <div>
  16.             <h2>登录页面</h2>
  17.             <h3>注册页面</h3>
  18.         </div>
  19.     </template>
  21.     <div id="app">
  22.         <!-- 使用组件 -->
  23.         <account> </account>
  24.     </div>
  26.     <script>
  28.         //定义、注册组件
  29.         Vue.component('account', {
  30.             template: '#myAccount'    // template 是 Vue 中的关键字，不能改。
  31.         });
  33.         new Vue({
  34.             el: '#app'
  35.         });
  36.     </script>
  37. </body>
  39. </html>

代码截图如下：

11-Vue组件的定义和注册 - 图6

写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了<template>标签中而已，这样有利于 html 标签的书写。

使用components定义私有组件

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  14.     <div id="app">
  15.         <!-- 使用Vue实例内部的私有组件 -->
  16.         <my-login></my-login>
  17.     </div>
  19.     <script>
  21.         new Vue({
  22.             el: '#app',
  23.             data: {},
  24.             components: { // 定义、注册Vue实例内部的私有组件
  25.                 myLogin: {
  26.                     template: '<h3>这是私有的login组件</h3>'
  27.                 }
  28.             }
  31.         });
  32.     </script>
  33. </body>
  35. </html>

运行效果：

11-Vue组件的定义和注册 - 图7

【荐】当然，我们还可以把模板的定义存放在<template>标签中，这样的话，模板里的html标签就可以出现智能提示和高亮，避免出错。如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  14.     <!-- 定义模板 -->
  15.     <template id="loginTmp">
  16.         <h3>这是私有的login组件</h3>
  17.     </template>
  19.     <div id="app">
  20.         <!-- 调用Vue实例内部的私有组件 -->
  21.         <my-login></my-login>
  22.     </div>
  24.     <script>
  25.         new Vue({
  26.             el: '#app',
  27.             data: {},
  28.             components: { // 定义、注册Vue实例内部的私有组件
  29.                 myLogin: {
  30.                     template: '#loginTmp'
  31.                 }
  32.             }
  33.         });
  34.     </script>
  35. </body>
  37. </html>

运行效果不变。

上方代码中，如果在注册私有组件时，组件的名称是驼峰命名，比如：

  1.             components: { // 定义、注册Vue实例内部的私有组件
  2.                 myLogin: {
  3.                     template: '#loginTmp'
  4.                 }
  5.             }

那么，在标签中使用组件时，需要把大写的驼峰改为小写的字母，同时两个单词之间使用-进行连接：

  1.         <my-login></my-login>

所以，为了避免名字不一致的问题，我们注册组件时，组件的名称可以直接写成my-login。比如：（避免驼峰不一致的建议写法）

  1.             components: { // 定义、注册Vue实例内部的私有组件
  2.                 `my-login`: {
  3.                     template: '#loginTmp'
  4.                 }
  5.             }

为组件添加 data 和 methods

既然组件是一个页面，那么，页面中可能会有一些功能要动态展示。因此，我们有必要为组件添加 data 和 methods。

代码举例如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <!-- 定义组件的模板 -->
  14.     <template id="myAccount">
  15.         <div>
  16.             <!-- 在组件的模板中，调用本组件中的data -->
  17.             {{myData}}
  18.             <a href="#" v-on:click="login">登录1</a>
  19.             <h2>登录页面</h2>
  20.             <h3>注册页面</h3>
  22.         </div>
  23.     </template>
  25.     <div id="app">
  26.         <!-- 第一次调用组件 -->
  27.         <account> </account>
  28.         <!-- 第二次调用组件 -->
  29.         <account> </account>
  30.     </div>
  32.     <script>
  34.         //定义、注册组件
  35.         Vue.component('account', {
  36.             template: '#myAccount',
  37.             //组件中的 data
  38.             //【注意】组件中的data，不再是对象，而是一个方法（否则报错）；而且这个方法内部，还必须返回一个对象才行
  39.             // 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
  40.             data: function () {
  41.                 return {
  42.                     myData: 'smyhvae'
  43.                 }
  44.             },
  45.             //组件中的 method
  46.             methods: {
  47.                 login: function () {
  48.                     alert('login操作');
  49.                 }
  50.             }
  51.         });
  53.         new Vue({
  54.             el: '#app'
  55.         });
  56.     </script>
  57. </body>
  59. </html>

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

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

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

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

为什么组件的data必须是一个function

我们先来看下面这样的例子：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <!-- 第一次调用组件 -->
  15.         <counter></counter>
  16.         <hr>
  18.         <!-- 第二次调用组件 -->
  19.         <counter></counter>
  20.     </div>
  22.     <!-- 定义模板 -->
  23.     <template id="tmpl">
  24.         <div>
  25.             <input type="button" value="让count加1" @click="increment">
  26.             <h3>{{count}}</h3>
  27.         </div>
  28.     </template>
  30.     <script>
  31.         var dataObj = { count: 0 }
  33.         // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
  34.         Vue.component('counter', {
  35.             template: '#tmpl',
  36.             data: function () {
  37.                 return dataObj //当我们return全局的dataObj的时候，子组件们会共享这个dataObj
  38.             },
  39.             methods: {
  40.                 increment() {
  41.                     this.count++
  42.                 }
  43.             }
  44.         })
  46.         // 创建 Vue 实例，得到 ViewModel
  47.         var vm = new Vue({
  48.             el: '#app',
  49.             data: {},
  50.             methods: {}
  51.         });
  52.     </script>
  53. </body>
  55. </html>

运行效果如下：

11-Vue组件的定义和注册 - 图8

上面的例子中，将组件<counter>调用了两次，由于dataObj是全局对象，导致两个组件实例都可以共享这个dataObj数据。于是，我们点击任何一个组件实例的按钮，都可以让count数据加1。

现在问题来了，如果我们想让组件<counter>的两个实例去单独操作count数据，应该怎么做呢？我们应该修改 data中 return出去的内容：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <counter></counter>
  15.         <hr>
  16.         <counter></counter>
  17.         <hr>
  18.         <counter></counter>
  19.     </div>
  21.     <template id="tmpl">
  22.         <div>
  23.             <input type="button" value="让count加1" @click="increment">
  24.             <h3>{{count}}</h3>
  25.         </div>
  26.     </template>
  28.     <script>
  29.         var dataObj = { count: 0 }
  31.         // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
  32.         Vue.component('counter', {
  33.             template: '#tmpl',
  34.             data: function () {
  35.                 // return dataObj //当我们return全局的dataObj的时候，这个dataObj是共享的
  36.                 return { count: 0 } // 【重要】return一个**新开辟**的对象数据
  37.             },
  38.             methods: {
  39.                 increment() {
  40.                     this.count++
  41.                 }
  42.             }
  43.         })
  45.         // 创建 Vue 实例，得到 ViewModel
  46.         var vm = new Vue({
  47.             el: '#app',
  48.             data: {},
  49.             methods: {}
  50.         });
  51.     </script>
  52. </body>
  54. </html>

运行效果：

11-Vue组件的定义和注册 - 图9

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

组件的切换

使用v-if和v-else结合flag进行切换

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <!-- 温馨提示：`.prevent`可以阻止超链接的默认事件 -->
  15.         <a href="" @click.prevent="flag=true">登录</a>
  16.         <a href="" @click.prevent="flag=false">注册</a>
  18.         <!-- 登录组件/注册组件，同时只显示一个 -->
  19.         <login v-if="flag"></login>
  20.         <register v-else="flag"></register>
  22.     </div>
  24.     <script>
  25.         Vue.component('login', {
  26.             template: '<h3>登录组件</h3>'
  27.         })
  29.         Vue.component('register', {
  30.             template: '<h3>注册组件</h3>'
  31.         })
  33.         // 创建 Vue 实例，得到 ViewModel
  34.         var vm = new Vue({
  35.             el: '#app',
  36.             data: {
  37.                 flag: false
  38.             },
  39.             methods: {}
  40.         });
  41.     </script>
  42. </body>
  44. </html>

运行效果如下：

11-Vue组件的定义和注册 - 图10

使用Vue提供的<component>标签实现组件切换

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

那如何实现三个甚至三个以上的组件切换呢？这里，我们可以用到Vue提供的<component>标签。

我们先来看一下<component>标签的用法。

基于上面的代码，如果我想让login组件显示出来，借助<component>标签可以这样做：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="Vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  15.         <!-- Vue提供了 component ,来展示对应名称的组件 -->
  16.         <!-- 【重要】component 是一个占位符, `:is` 属性,可以用来指定要展示的组件名称。这里，我们让 login 组件显示出来 -->
  17.         <component :is="'login'"></component>
  19.     </div>
  21.     <script>
  22.         // 组件名称是 字符串
  23.         Vue.component('login', {
  24.             template: '<h3>登录组件</h3>'
  25.         })
  27.         Vue.component('register', {
  28.             template: '<h3>注册组件</h3>'
  29.         })
  31.         // 创建 Vue 实例，得到 ViewModel
  32.         var vm = new Vue({
  33.             el: '#app',
  34.             data: {
  35.                 comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
  36.             },
  37.             methods: {}
  38.         });
  39.     </script>
  40. </body>
  42. </html>

上方代码中，提取关键代码如下：

  1.         <component :is="'login'"></component>

如果我想让register组件显示出来，借助<component>标签可以这样做：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="Vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  15.         <!-- Vue提供了 component ,来展示对应名称的组件 -->
  16.         <!-- 【重要】component 是一个占位符, `:is` 属性,可以用来指定要展示的组件名称 -->
  17.         <component :is="'register'"></component>
  19.     </div>
  21.     <script>
  22.         // 组件名称是 字符串
  23.         Vue.component('login', {
  24.             template: '<h3>登录组件</h3>'
  25.         })
  27.         Vue.component('register', {
  28.             template: '<h3>注册组件</h3>'
  29.         })
  31.         // 创建 Vue 实例，得到 ViewModel
  32.         var vm = new Vue({
  33.             el: '#app',
  34.             data: {
  35.                 comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
  36.             },
  37.             methods: {}
  38.         });
  39.     </script>
  40. </body>
  42. </html>

上方代码中，提取关键代码如下：

  1.         <component :is="'register'"></component>

因此，如果要实现组件之间的切换，我们可以给<component>标签里的is属性值设置为变量即可，来看看代码实现。

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10. </head>
  12. <body>
  13.     <div id="app">
  14.         <!-- 点击按钮后，设置变量`comName`为不同的值，代表着后面的component里显示不同的组件 -->
  15.         <a href="" @click.prevent="comName='login'">登录</a>
  16.         <a href="" @click.prevent="comName='register'">注册</a>
  18.         <!-- Vue提供了 component ,来展示对应名称的组件 -->
  19.         <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
  20.         <!-- 此处的`comName`是变量，变量值为组件名称 -->
  21.         <component :is="comName"></component>
  23.     </div>
  25.     <script>
  26.         // 组件名称是 字符串
  27.         Vue.component('login', {
  28.             template: '<h3>登录组件</h3>'
  29.         })
  31.         Vue.component('register', {
  32.             template: '<h3>注册组件</h3>'
  33.         })
  35.         // 创建 Vue 实例，得到 ViewModel
  36.         var vm = new Vue({
  37.             el: '#app',
  38.             data: {
  39.                 comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
  40.             },
  41.             methods: {}
  42.         });
  43.     </script>
  44. </body>
  46. </html>

效果：

11-Vue组件的定义和注册 - 图11

多个组件切换时，通过mode属性添加过渡的动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <script src="vue2.5.16.js"></script>
  10.     <style>
  11.         .v-enter,
  12.         .v-leave-to {
  13.             opacity: 0;
  14.             transform: translateX(150px);
  15.         }
  17.         .v-enter-active,
  18.         .v-leave-active {
  19.             transition: all 0.5s ease;
  20.         }
  21.     </style>
  22. </head>
  24. <body>
  25.     <div id="app">
  26.         <a href="" @click.prevent="comName='login'">登录</a>
  27.         <a href="" @click.prevent="comName='register'">注册</a>
  29.         <!-- 通过 mode 属性,设置组件切换时候的 过渡动画 -->
  30.         <!-- 【重点】亮点是 mode="out-in" 这句话 -->
  31.         <transition mode="out-in">
  32.             <component :is="comName"></component>
  33.         </transition>
  35.     </div>
  37.     <script>
  38.         // 组件名称是 字符串
  39.         Vue.component('login', {
  40.             template: '<h3>登录组件</h3>'
  41.         })
  43.         Vue.component('register', {
  44.             template: '<h3>注册组件</h3>'
  45.         })
  47.         // 创建 Vue 实例，得到 ViewModel
  48.         var vm = new Vue({
  49.             el: '#app',
  50.             data: {
  51.                 comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
  52.             },
  53.             methods: {}
  54.         });
  55.     </script>
  56. </body>
  58. </html>

运行效果：

11-Vue组件的定义和注册 - 图12

如上方代码所示，多个组件切换时，如果要设置动画，可以用<transition>把组件包裹起来。需要注意的是，我给<transition>标签里添加了mode="out-in"这种模式，它表示第一个组件消失之后，第二个组件才会出现。如果没有这个mode属性，效果如下：（第一个组件准备消失的时候，第二个组件马上就准备出现，这不是我们想要的效果）

11-Vue组件的定义和注册 - 图13

我的公众号

想学习更多技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。

扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：

11-Vue组件的定义和注册 - 图14