Vue组件详解（一）

简介

在这里插入图片描述

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

什么是组件化？

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

对组件的理解

传统方式编写页面

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

在这里插入图片描述

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

虽然说css样式和js文件已经完成了复用，但是在结构上，也就是html，是并没有复用的，很多时候我们在处理多个页面中相同的部分都是ctrl+c，ctrl+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学习过程中自己的理解与看法，文章略显拙劣，如有不同看法，可根据自身选择。

持续更新中~~~~

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

# javascript # 前端框架 # 前端 # vue.js # html
Logo
View Design

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

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign