2023最新版老杜Vue2+3实战教程（三）Vue组件化

AsaKaac

已于 2023-04-26 10:44:00 修改

阅读量638

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端前端框架

于 2023-04-26 10:06:22 首次发布

本文链接：https://blog.youkuaiyun.com/qaswedpl/article/details/130378808

本文是动力节点老杜的Vue2到Vue3实战教程，详细讲解了Vue组件化的概念、创建、注册和使用，包括组件嵌套、VueComponent与Vue的关系、单文件组件、Vue CLI的安装与使用。通过实例探讨了组件的props配置、事件处理、混入、插件、局部样式与数据持久化，并提供了BugList案例的组件化改造过程，深入理解Vue的组件通信和项目构建流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动力节点老杜全新版Vue教程笔记分享给大家

学习の地止：https://www.bilibili.com/video/BV17h41137i4

视频教程从Vue2开始讲解，一步一个案例，知识点由浅入深，然后很自然的过度到Vue3版本。Vue3是目前企业中使用最多的一个版本。
视频中会把每一个Vue的知识点讲解的非常通透，不但举例告诉你怎么用，还会告诉你底层实现原理。
例如：Vue的数据代理机制底层实现原理是什么？本套视频中会从零手写一个Vue的数据代理机制，都是源码级的讲解。

3 Vue组件化

3.1 什么是组件

传统方式开发的应用

一个网页通常包括三部分：结构（HTML）、样式（CSS）、交互（JavaScript）

传统应用存在的问题：

关系纵横交织，复杂，牵一发动全身，不利于维护。
代码虽然复用，但复用率不高。
组件化方式开发的应用

使用组件化方式开发解决了以上的两个问题：

每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。更加便于维护。
代码复用性增强。组件不仅让js css复用了，HTML代码片段也复用了（因为要使用组件直接引入组件即可）。
什么是组件？
1. 组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。
2. 模块：一个大的js文件按照模块化拆分规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。
3. 任何一个组件中都可以包含这些资源：HTML CSS JS 图片声音视频等。从这个角度也可以说明组件是可以包括模块的。
组件的划分粒度很重要，粒度太粗会影响复用性。为了让复用性更强，Vue的组件也支持父子组件嵌套使用。

子组件由父组件来管理，父组件由父组件的父组件管理。在Vue中根组件就是vm。因此每一个组件也是一个Vue实例。

3.2 组件的创建、注册和使用

**
<html lang=“en”>
```
**<meta** charset="UTF-8"**>**  
```

**<title>**组件的创建注册和使用**</title>**

**<script** src="../js/vue.js"**></script>**

```
**<div** id="app"**>**  
```

    **<h1>**{
    
    {msg}}**</h1>**

```
      
```
```
    **<userlist></userlist>**  
```
```
    **<userlist></userlist>**  
```
```
    **<userlogin></userlogin>**  
```
```
    **<userlogin></userlogin>**  
```
```
**</div>**  
```
```
**<script>**  
```
```
    // 1.创建组件  
```

    const userListComponent = Vue.extend({

```
        template : `  
```
```
            **<ul>**  
```

                **<li** v-for="(user,index) of users" :key="user.id"**>**

                    {
    
    {index}},{
    
    {user.name}}

```
                **</li>**  
```
```
            **</ul>**      
```
```
        `,  
```
```
        data(){  
```
```
            return {  
```
```
                users : [  
```

                    {id:'001', name:'jack'},

                    {id:'002', name:'lucy'},

                    {id:'003', name:'james'}

```
                ]  
```
```
            }  
```
```
        }  
```
```
    })  
```
```
    // 1.创建组件  
```

    const userLoginComponent = Vue.extend({

```
        template : `  
```
```
        **<div>**  
```

        **<h3>**用户登录**</h3>**

        **<form** @submit.prevent="login"**>**

        账号：**<input** type="text" v-model="username"**><br><br>**

        密码：**<input** type="password" v-model="password"**><br><br>**

        **<button>**登录**</button>**

```
        **</form>**  
```
```
        **</div>**  
```
```
        `,  
```
```
        data(){  
```
```
            return {  
```
```
                username : 'admin',  
```
```
                password : '123'  
```
```
            }  
```
```
        },  
```
```
        methods : {  
```
```
            login(){  
```

                alert(this.username + "," + this.password)

```
            }  
```
```
        }  
```
```
    })  
```
```
    const vm = new Vue({  
```
```
        el : '#app',  
```
```
        data : {  
```

            msg : '组件的创建注册和使用'

```
        },  
```

        // 2.注册组件（局部注册）

```
        components : {  
```

            // userlist 就是组件的名字

            userlist : userListComponent,

            userlogin : userLoginComponent

```
        }  
```
```
    })  
```
```
**</script>**  
```
创建组件
1. const userComponent = Vue.extend({这个配置项和创建Vue实例的配置项几乎是一样的，只是略有差异})
2. 需要注意的是：
  1. el不能用。组件具有通用性，不特定为某个容器服务，它为所有容器服务。
  2. data必须使用函数形式：return {}
  3. 使用template配置项配置页面结构：HTML。
注册组件
1. 局部注册
  1. 使用components配置项：components : {user : userComponent}，user就是组件名。
2. 全局注册
  1. Vue.component(‘user’, userComponent)
使用组件
1. 直接在页面需要使用组件的位置：
2. 也可以这样使用：（不在脚手架环境中使用这种方式会出现后续元素不渲染的问题。）
创建组件对象也有简写形式：Vue.extend() 可以省略。直接写：{}
组件的命名细节：
1. 全部小写
2. 首字母大写，后面全部小写
3. kebab-case串式命名法
4. CamelCase驼峰式命名法（这种方式需要在脚手架环境中使用）
5. 不要使用HTML内置的标签作为组件名称。
6. 可以使用name配置项来指定Vue开发者工具中显示的组件名。

3.3 组件嵌套

**
<html lang=“en”>
```
**<meta** charset="UTF-8"**>**  
```
```
**<title>**组件嵌套**</title>**  
```

**<script** src="../js/vue.js"**></script>**

```
**<div** id="root"**></div>**  
```
```
**<script>**  
```
```
    // 创建Y1组件  
```
```
    const y1 = {  
```
```
        template : `  
```
```
            **<div>**  
```

                **<h3>**Y1组件**</h3>**

```
            **</div>**  
```
```
        `  
```
```
    }  
```
```
    // 创建X1组件  
```
```
    const x1 = {  
```
```
        template : `  
```
```
            **<div>**  
```

                **<h3>**X1组件**</h3>**

```
            **</div>**  
```
```
        `  
```
```
    }  
```
```
    // 创建Y组件  
```
```
    const y = {  
```
```
        template : `  
```
```
            **<div>**  
```

                **<h2>**Y组件**</h2>**

```
                **<y1></y1>**  
```
```
            **</div>**  
```
```
        `,  
```
```
        components : {y1}  
```
```
    }  
```
```
    // 创建X组件  
```
```
    const x = {  
```
```
        template : `  
```
```
            **<div>**  
```

                **<h2>**X组件**</h2>**

```
                **<x1></x1>**  
```
```
            **</div>**  
```
```
        `,  
```
```
        components : {x1}  
```
```
    }  
```
```
    // 创建app组件  
```
```
    const app = {  
```
```
        template : `  
```
```
            **<div>**  
```

                **<h1>**App组件**</h1>**

```
                **<x></x>**  
```
```
                **<y></y>**  
```
```
            **</div>**  
```
```
        `,  
```
```
        // 注册X组件  
```
```
        components : {x,y}  
```
```
    }  
```
```
    // vm  
```
```
    const vm = new Vue({  
```
```
        el : '#root',  
```
```
        template : `  
```
```
            **<app></app>**  
```
```
        `,  
```

最低0.47元/天解锁文章

200万优质内容无限畅学