当前位置： 首页 > news >正文

Vue.js 2.x：组件的定义和注册（详细的图文教程）

news 来源：原创 2024/5/11 1:25:27

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一起入门和进阶前端。

以下是正文。

前言

什么是组件

组件： 组件的出现，就是为了拆分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>

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

运行结果如下：

20180422_2230.png

代码截图如下：

20180422_2223.png

上图中，注意两点：

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

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

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

<my-component> </my-component>

Vue.component('my')

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

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

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

20180422_2232.png

写法二

写法二：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>

代码截图如下：

20180422_2251.png

上图中，同样注意两点：

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

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

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

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

20180422_2232.png

写法三

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

写法三：将组件内容定义到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>

代码截图如下：

20180422_2256.png

写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了<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>

运行效果：

20180617_1809.png

当然，我们还可以把模板的定义存放在<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="#" 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>

运行效果如下：

20180617_1925.gif

上面的例子中，将组件<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>

运行效果：

20180617_1935.gif

如上图所示，每当我们创建一个新的组件实例时，就会调用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="flag=true">登录</a>
        <a href="" @click.prevent="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>

运行效果如下：

20180617_1957.gif

使用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="comName='login'">登录</a>
        <a href="" @click.prevent="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>

效果：

20180617_1957.gif

我的公众号

想学习代码之外的软技能？不妨关注我的微信公众号：生命团队（id：vitateam）。

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

2016040102.jpg

相关文章：

  • Nginx负载均衡，ssl原理，生成ssl密钥对，Nginx配置ssl
  • easyui-tree 修改图标
  • egret--一次性给多个对象添加点击事件
  • 《Python从小白到大牛》第3章 第一个Python程序
  • webpack4.X初学之配置VUE开发环境
  • val和var和Java
  • 银河证券互联网转型调研报告：数字化加速器助推银河战舰腾飞
  • 第十七节：易混淆的概念(静态和非静态、拆箱和装箱)
  • 从10亿到百亿规模大促，用云效玩转项目管理
  • for in遍历对象属性注意事项
  • nodejs：开发并发布一个nodejs包
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • MySQL运维系列 之 如何快速定位IO瓶颈
  • aidl跨进程通讯
  • MySQL主从介绍 准备工作 配置主 配置从 测试主从同步
  • IE9 : DOM Exception: INVALID_CHARACTER_ERR (5)
  • 2018以太坊智能合约编程语言solidity的最佳IDEs
  • Android 初级面试者拾遗（前台界面篇）之 Activity 和 Fragment
  • ES10 特性的完整指南
  • If…else
  • Java基本数据类型之Number
  • k8s如何管理Pod
  • Linux链接文件
  • Lsb图片隐写
  • mockjs让前端开发独立于后端
  • Protobuf3语言指南
  • Tornado学习笔记（1）
  • UMLCHINA 首席专家潘加宇鼎力推荐
  • ViewService——一种保证客户端与服务端同步的方法
  • 给新手的新浪微博 SDK 集成教程【一】
  • 简单数学运算程序（不定期更新）
  • 容器服务kubernetes弹性伸缩高级用法
  • 算法-插入排序
  • 算法---两个栈实现一个队列
  • 通信类
  • 译有关态射的一切
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • Salesforce和SAP Netweaver里数据库表的元数据设计
  • 不要一棍子打翻所有黑盒模型，其实可以让它们发挥作用 ...
  • #LLM入门|Prompt#2.3_对查询任务进行分类|意图分析_Classification
  • #NOIP 2014# day.1 T2 联合权值
  • （C语言）fread与fwrite详解
  • （C语言）深入理解指针2之野指针与传值与传址与assert断言
  • （机器学习的矩阵）（向量、矩阵与多元线性回归）
  • （一）eclipse Dynamic web project 工程目录以及文件路径问题
  • (原創) 人會胖會瘦，都是自我要求的結果 (日記)
  • .NET “底层”异步编程模式——异步编程模型（Asynchronous Programming Model，APM）...
  • .net framework 4.0中如何 输出 form 的name属性。
  • .Net Remoting(分离服务程序实现) - Part.3
  • .net 写了一个支持重试、熔断和超时策略的 HttpClient 实例池
  • .NET文档生成工具ADB使用图文教程
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • [BJDCTF2020]The mystery of ip1
  • [BZOJ3211]:花神游历各国（小清新线段树）
  • [BZOJ3223]文艺平衡树