动力节点杜老师Vue课程笔记第三章Vue组件化

本文链接：https://blog.csdn.net/A_coding/article/details/130217752

本文详细介绍了Vue的组件化开发，从组件的概念、创建、注册和使用展开，探讨了VueComponent与Vue的区别，深入讲解了单文件组件、Vue CLI的安装与使用，以及如何通过props、事件传递实现组件间通信。此外，还涵盖了Vue脚手架的配置、混入（mixins）、插件（plugins）以及局部样式（scoped）等内容，最后通过BugList案例展示了组件化开发的实际应用。

摘要由CSDN通过智能技术生成

3 Vue组件化

3.1 什么是组件

传统方式开发的应用

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

传统应用存在的问题：

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

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

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

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

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

 <!DOCTYPE html**>**  
2. **<html** lang="en"**>**  
3. **<head>**  
4.     **<meta** charset="UTF-8"**>**  
5.     **<title>**组件的创建注册和使用**</title>**  
6.     **<script** src="../js/vue.js"**></script>**  
7. **</head>**  
8. **<body>**  
9.     **<div** id="app"**>**  
10.         **<h1>**{
   {
   msg}}**</h1>**  
11.         <!-- 3.使用组件 -->  
12.         **<userlist></userlist>**  
13.         **<userlist></userlist>**  
14.         **<userlogin></userlogin>**  
15.         **<userlogin></userlogin>**  
16.     **</div>**  
17.     **<script>**  
18.         // 1.创建组件  
19.         const userListComponent = Vue.extend({
     
20.             template : `  
21.                 **<ul>**  
22.                     **<li** v-for="(user,index) of users" :key="user.id"**>**  
23.                         {
   {
   index}},{
   {
   user.name}}  
24.                     **</li>**  
25.                 **</ul>**      
26.             `,  
27.             data(){
     
28.                 return {
     
29.                     users : [  
30.                         {
   id:'001', name:'jack'},  
31.                         {
   id:'002', name:'lucy'},  
32.                         {
   id:'003', name:'james'}  
33.                     ]  
34.                 }  
35.             }  
36.         })  
37.   
38.         // 1.创建组件  
39.         const userLoginComponent = Vue.extend({
     
40.             template : `  
41.             **<div>**  
42.             **<h3>**用户登录**</h3>**  
43.             **<form** @submit.prevent="login"**>**  
44.             账号：**<input** type="text" v-model="username"**><br><br>**  
45.             密码：**<input** type="password" v-model="password"**><br><br>**  
46.             **<button>**登录**</button>**  
47.             **</form>**  
48.             **</div>**  
49.             `,  
50.             data(){
     
51.                 return {
     
52.                     username : 'admin',  
53.                     password