简介

在这里插入图片描述

组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,MP4,img,ttf等)的集合。其优势是能复用编码,简化项目代码,提高运行效率,降低程序员重复编码。

什么是组件化?

当一个应用中的功能都是多组件的方式编写的,那这个应用就是一个组件化的应用。


对组件的理解

传统方式编写页面

传统方式下,我们进行前端开发时,都是一个html文档对应一个或多个css样式和js文件,且多个页面中,可能出现相同的部分,例如网页导航,例如网页底部信息,又难免出现复用同样的html结构,css样式和js文件,但假如任意改动其中一部分,那整个项目中复用的部分都会随之发生改变,就会造成依赖关系混乱,且不好维护。

在这里插入图片描述

其次,传统方式编写项目,每一个页面都是一个html文档,每出现一个新页面,就要新增一个html文档和一个或多个css样式及js文件,难免会存在文件较多的问题,每一个网页大多都是一个独立的部分,所以,代码复用率不是很高。

虽然说css样式和js文件已经完成了复用,但是在结构上,也就是html,是并没有复用的,很多时候我们在处理多个页面中相同的部分都是ctrl+cctrl+v进行复制,虽然结构只写了一遍,但是从方式上,并不是复用,而是复制。


组件方式编写页面

用组件方式来编写页面,其实简单理解来说就是把一个完整的网页拆分成一个又一个的组件,就比如说,一个网页包含头部导航,主体内容,底部信息。我们可以把网页头部导航划分为一个组件,剩下的同样对应划分为组件。拿顶部导航这个组件来说,这个组件包含了实现顶部导航的html结构,css样式和js代码。
在这里插入图片描述

每一个组件只负责对应的结构,样式和交互,各司其职,互不干扰,然后由这些一个又有一个的组件组成了一个完整的页面。且网页被拆分为组件后,我们就可以进行组件化编码最直观的优点或亮点就是,组件复用,也就是多个网页相同的部分,只需要写一个组件然后按需引入就行。


非单文件组件

非单文件组件是指一个文件中包含多个组件,也就是说,所有的组件都是写在一个文件中。

首先,我们用一个实例引出非单文件的用法
上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>海贼王生命资料卡</h1>
        <h2>人物姓名:{{name}}</h2>
        <h2>人物年龄:{{age}}</h2>
        <hr>
        <h2>出生地点:{{address}}</h2>
        <h2>悬赏金:{{amount}}</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false    //关闭Vue代码提示
    new Vue({
        el:"#app",
        data:{
            name:'蒙奇·D·路飞',
            age:19,
            address:'东海风车村',
            amount:'15亿贝利'
        }
    })
</script>
</html>

效果图如下:

在这里插入图片描述

接下来我们按照方框内的划分,把页面拆分为TestA和TestB两个组件
第一步,创建组件:
在这里插入图片描述

第二步,注册组件(局部注册):
在这里插入图片描述

第三步,使用组件:
在这里插入图片描述


完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>海贼王生命资料卡</h1>
        <!-- 使用组件 -->
        <testa></testa>
        <hr>
        <testb></testa>
</body>
<script>
     Vue.config.productionTip = false    //阻止Vue在启动生成生产提示
    
    // 创建TestA组件
    const testa = Vue.extend({
        template:`
        <div>
            <h2>人物姓名:{{name}}</h2>
            <h2>人物年龄:{{age}}</h2>    
        </div>
        `,
        data(){
            return{
                name:'蒙奇·D·路飞',
                age:19,
            }
        }
    });

    // 创建TestB组件
    const testb = Vue.extend({
        template:`
        <div>
            <h2>出生地点:{{address}}</h2>
            <h2>悬赏金:{{amount}}</h2>
        </div>
        `,
        data(){
            return{
                address:'东海风车村',
                amount:'15亿贝利'
            }
        }
    });

    // 创建vm
    new Vue({
        el:"#app",
        // 注册组件(局部注册)
        components:{
            testa:testa,
            testb:testb,
        }
    })

</script>
</html>

插入一个有关于data写法的知识点,在未接触到组件时,data的写法都是对象式写法,但是从组件之后,data的写法要转换为函数式写法

为什么要使用组件之后data要转换为函数式写法呢?
因为,我们说,使用组件最大的优势就是复用,也就是说假如我们创建了A组件并且使用data的对象式写法,但是之后很多地方都会用到A组件,此时,如果我们修改任意一个页面中A组件data属性中的数据,那么所有使用到A组件的地方,数据都会被更改,而函数式则不会,这样保证了在组件复用时,数据的独立性。

对象式写法,页面A中组件数据的改变会影响其他页面组件数据的改变
在这里插入图片描述

函数式写法,页面A中组件数据的改变不会影响其他页面组件数据的改变
在这里插入图片描述

刚刚我们说了组件的局部注册方法,接下来讲一讲组件的全局注册

围绕非单文件组件展开,组件的局部注册指的是在一个 Vue实例(vm) 下使用,如果想要在多个Vue实例下使用相同的组件,局部注册组件肯定是不行的,这种情况就要考虑组件的全局注册,全局注册组件之后,组件就可以被多个 Vue实例(vm) 使用,这时候,文章开头说的data函数式写法的优势也得以表现,各Vue实例可以共用一个组件, 且各相同组件的数据不会受到影响。

全局注册组件:

...
    // 创建TestB组件
    const testb = Vue.extend({
        template:`
        <div>
            <h2>出生地点:{{address}}</h2>
            <h2>悬赏金:{{amount}}</h2>
        </div>
        `,
        data(){
            return{
                address:'东海风车村',
                amount:'15亿贝利'
            }
        }
    });

    // 全局注册组件
    Vue.components('testb', testb);
...

总结

以上就是我对Vue组件基本使用的理解,也算是自己学习Vue的笔记,本篇文章介绍了Vue组件基本使用,但是都是基于非单文件组件展开,通过上述,相信大家对Vue组件应该有了一些基本的了解,也能学会组件的最基本使用,接下来我也会继续对Vue组件展开更深层次的学习和理解。

组件化编码的出现,一定程度上提高了我们开发的效率,同时,在Vue中,组件也是一个必不可少的部分,学习组件之后,我们就可以进行单页面应用的开发,总之,以上也是我对Vue学习过程中自己的理解与看法,文章略显拙劣,如有不同看法,可根据自身选择。

持续更新中~~~~

喜欢记得点赞关注呀!!!
在这里插入图片描述

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐