首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onJune 19, 2018

前言

什么是组件

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

模块化和组件化的区别

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

全局组件的定义和注册

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

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

写法一

写法一：使用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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- 如果要使用组件，直接把组件的名称，以 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>

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

运行结果如下：

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

代码截图如下：

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

上图中，注意两点：

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

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

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

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

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

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

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

写法二

写法二：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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <account> </account>
 </div>
 <script>
  //定义、注册组件：第一个参数是组件的名称（标签名），第二个参数是组件的定义
  Vue.component('account', {
   template: '<div><h2>登录页面</h2> <h3>注册页面</h3></div>' // template 是 Vue 中的关键字，不能改。
  });
  new Vue({
   el: '#app'
  });
 </script>
</body>
</html>

代码截图如下：

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

上图中，同样注意两点：

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

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

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

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

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

写法三

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

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

代码如下：

<!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="vue2.5.16.js"></script>
</head>
<body>
 <!-- 定义模板 -->
 <template id="myAccount">
  <div>
   <h2>登录页面</h2>
   <h3>注册页面</h3>
  </div>
 </template>
 <div id="app">
  <!-- 使用组件 -->
  <account> </account>
 </div>
 <script>
  //定义、注册组件
  Vue.component('account', {
   template: '#myAccount' // template 是 Vue 中的关键字，不能改。
  });
  new Vue({
   el: '#app'
  });
 </script>
</body>
</html>

代码截图如下：

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

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

使用components定义私有组件

我们在上一段中定义的是全局组件，这样做的时候，多个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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- 使用Vue实例内部的私有组件 -->
  <my-login></my-login>
 </div>
 <script>
  new Vue({
   el: '#app',
   data: {},
   components: { // 定义、注册Vue实例内部的私有组件
    myLogin: {
     template: '<h3>这是私有的login组件</h3>'
    }
   }
  });
 </script>
</body>
</html>

运行效果：

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

当然，我们还可以把模板的定义存放在<template>标签中，这样的话，模板里的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="vue2.5.16.js"></script>
</head>
<body>
 <!-- 定义模板 -->
 <template id="loginTmp">
  <h3>这是私有的login组件</h3>
 </template>
 <div id="app">
  <!-- 调用Vue实例内部的私有组件 -->
  <my-login></my-login>
 </div>
 <script>
  new Vue({
   el: '#app',
   data: {},
   components: { // 定义、注册Vue实例内部的私有组件
    myLogin: {
     template: '#loginTmp'
    }
   }
  });
 </script>
</body>
</html>

运行效果不变。

为组件添加 data 和 methods

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

代码举例如下：

<!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="vue2.5.16.js"></script>
</head>
<body>
 <!-- 定义组件的模板 -->
 <template id="myAccount">
  <div>
   <!-- 在组件的模板中，调用本组件中的data -->
   {{myData}}
   <a href="#" rel="external nofollow" v-on:click="login">登录1</a>
   <h2>登录页面</h2>
   <h3>注册页面</h3>
  </div>
 </template>
 <div id="app">
  <!-- 第一次调用组件 -->
  <account> </account>
  <!-- 第二次调用组件 -->
  <account> </account>
 </div>
 <script>
  //定义、注册组件
  Vue.component('account', {
   template: '#myAccount',
   //组件中的 data
   //【注意】组件中的data，不再是对象，而是一个方法（否则报错）；而且这个方法内部，还必须返回一个对象才行
   // 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
   data: function () {
    return {
     myData: 'smyhvae'
    }
   },
   //组件中的 method
   methods: {
    login: function () {
     alert('login操作');
    }
   }
  });
  new Vue({
   el: '#app'
  });
 </script>
</body>
</html>

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

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

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

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

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

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

<!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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- 第一次调用组件 -->
  <counter></counter>
  <hr>
  <!-- 第二次调用组件 -->
  <counter></counter>
 </div>
 <!-- 定义模板 -->
 <template id="tmpl">
  <div>
   <input type="button" value="让count加1" @click="increment">
   <h3>{{count}}</h3>
  </div>
 </template>
 <script>
  var dataObj = { count: 0 }
  // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
  Vue.component('counter', {
   template: '#tmpl',
   data: function () {
    return dataObj //当我们return全局的dataObj的时候，子组件们会共享这个dataObj
   },
   methods: {
    increment() {
     this.count++
    }
   }
  })
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {}
  });
 </script>
</body>
</html>

运行效果如下：

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

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

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

<!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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <counter></counter>
  <hr>
  <counter></counter>
  <hr>
  <counter></counter>
 </div>
 <template id="tmpl">
  <div>
   <input type="button" value="让count加1" @click="increment">
   <h3>{{count}}</h3>
  </div>
 </template>
 <script>
  var dataObj = { count: 0 }
  // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
  Vue.component('counter', {
   template: '#tmpl',
   data: function () {
    // return dataObj //当我们return全局的dataObj的时候，这个dataObj是共享的
    return { count: 0 } // 【重要】return一个**新开辟**的对象数据
   },
   methods: {
    increment() {
     this.count++
    }
   }
  })
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {}
  });
 </script>
</body>
</html>

运行效果：

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

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

组件的切换

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

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

<!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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- 温馨提示：`.prevent`可以阻止超链接的默认事件 -->
  <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" flag=true">登录</a>
  <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" flag=false">注册</a>
  <!-- 登录组件/注册组件，同时只显示一个 -->
  <login v-if="flag"></login>
  <register v-else="flag"></register>
 </div>
 <script>
  Vue.component('login', {
   template: '<h3>登录组件</h3>'
  })
  Vue.component('register', {
   template: '<h3>注册组件</h3>'
  })
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    flag: false
   },
   methods: {}
  });
 </script>
</body>
</html>

运行效果如下：

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

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

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

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

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

基于上面的代码，如果我想让login组件显示出来，借助<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="Vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- Vue提供了 component ,来展示对应名称的组件 -->
  <!-- 【重要】component 是一个占位符, `:is` 属性,可以用来指定要展示的组件名称。这里，我们让 login 组件显示出来 -->
  <component :is="'login'"></component>
 </div>
 <script>
  // 组件名称是 字符串
  Vue.component('login', {
   template: '<h3>登录组件</h3>'
  })
  Vue.component('register', {
   template: '<h3>注册组件</h3>'
  })
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
   },
   methods: {}
  });
 </script>
</body>
</html>

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

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

如果我想让register组件显示出来，借助<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="Vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- Vue提供了 component ,来展示对应名称的组件 -->
  <!-- 【重要】component 是一个占位符, `:is` 属性,可以用来指定要展示的组件名称 -->
  <component :is="'register'"></component>
 </div>
 <script>
  // 组件名称是 字符串
  Vue.component('login', {
   template: '<h3>登录组件</h3>'
  })
  Vue.component('register', {
   template: '<h3>注册组件</h3>'
  })
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
   },
   methods: {}
  });
 </script>
</body>
</html>

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

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

因此，如果要实现组件之间的切换，我们可以给<component>标签里的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="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
  <!-- 点击按钮后，设置变量`comName`为不同的值，代表着后面的component里显示不同的组件 -->
  <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" comName='login'">登录</a>
  <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" comName='register'">注册</a>
  <!-- Vue提供了 component ,来展示对应名称的组件 -->
  <!-- component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称 -->
  <!-- 此处的`comName`是变量，变量值为组件名称 -->
  <component :is="comName"></component>
 </div>
 <script>
  // 组件名称是 字符串
  Vue.component('login', {
   template: '<h3>登录组件</h3>'
  })
  Vue.component('register', {
   template: '<h3>注册组件</h3>'
  })
  // 创建 Vue 实例，得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
   },
   methods: {}
  });
 </script>
</body>
</html>

效果：

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

总结

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

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

- Author -

生命壹号

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
treepanel动态加载数据实现代码
Dec 15 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
JavaScript实现网页跨年倒计时
Dec 02 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 #Javascript
vue mounted组件的使用
Jun 18 #Javascript
基于rollup的组件库打包体积优化小结
Jun 18 #Javascript
详解组件库的webpack构建速度优化
Jun 18 #Javascript
Javascript实现异步编程的过程
Jun 18 #Javascript
详解JS函数stack size计算方法
Jun 18 #Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 #jQuery
声卡驱动(1) 鸿蒙(2) 蓝屏(1) 滚动条(1) 鸿蒙3.0(1) RustDesk(1) Debian(1) 输入法(2) win7(2) Sunmao(1)
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
微信小程序swiper实现文字纵向轮播提示效果
2020/01/21 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
js实现验证码干扰（静态）
2021/02/22 Javascript
[02:30]DOTA2放量测试专访海涛：呼吁保护新手玩家
2013/08/26 DOTA
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python两种遍历字典(dict)的方法比较
2014/05/29 Python
django admin组件使用方法详解
2019/07/19 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
python代码中怎么换行
2020/06/17 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Groupon法国官方网站：特卖和网上购物高达-70%
2019/09/02 全球购物
兼职学生的自我评价
2013/11/24 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
毕业实习感受与体会
2015/05/26 职场文书
Python标准库之typing的用法(类型标注)
2021/06/02 Python
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript