Vue（六）组件，最新前端架构师成长路线

效果如下：

为什么组件的data必须是一个函数（高频笔试面试）：

可反复调用；

反复创建新对象；

避免组件间数据冲突。

二、组件化开发

前端一个页面的功能和代码量越来越多，但是操作系统是禁止多人协作编写一个文件的。组件化就是将一个大的页面，划分为多个组件区域，分别保存在不同的文件中，由多人协作开发。最后运行时，还能合并在一个页面中运行。

使用组件进行开发 便于多人协作，提高开发效率；松耦合，一人出错，不会影响全局。

1.组件的使用过程

（1）每当拿到一个页面后，先划分组件区域，根据3个原则：位置、功能、是否重用；

（2）为每个组件创建独立的js文件，来保存组件的代码；

（3）回到原页面中引入并使用组件标签，将组件重新拼接回一个完整的页面。

2.组件分类（vue三大组件）

（1）根组件 new Vue()

整个页面甚至整个项目只有一个new Vue()监控全局。

（2）全局组件 Vue.component()

可放在任何位置，没有限制。

（3）子组件

规定只能在指定父组件范围内使用的组件。子组件的创建及使用如下：

a.只创建一个普通的js对象，保存组件的内容；

var 子组件对象名={ 组件内容 }

b.为父组件添加新成员: components；

父组件:{

… : …,

components:{ 子组件对象名, … , }

}

c.在父组件界面中

<子组件标签名></子组件标签名>

---

举例： 实现待办事项列表的界面部分划分组件；

组件todo.js

Vue.component(“todo”, {

template: `

待办事项列表

`,

components: {

todoAdd, //vue自动将其翻译为todo-add

todoList //vue自动将其翻译为todo-list

}

})

组件todoAdd.js

var todoAdd = {

template: `

+

`

}

组件todoList.js

var todoList = {

template: `

`,

components: {

todoItem //vue将其自动翻译为todo-item

}

}

组件todoItem.js

var todoItem = {

template: `

• 1 - 吃饭 ×

• `

  }

  首页index.html

  效果如下：

  

  ---

  3.组件间传值——父给子传值

  //1.父给子:

  父组件:{

  template:`

  <子组件标签 :自定义属性名=“父组件的变量”>

  `

  //2.子组件接收属性值:

  子组件对象:{

  props:[ “自定义属性名” ]

  }

  //在子组件内，props中的属性用法和data中的变量用法完全一样

  //差别在于props的属性值来自于外部传入，data中的变量值由自己定义

  ---

  举例：使用父给子传值，实现待办事项列表功能；

  组件todo.js

  Vue.component(“todo”, {

  template: `

  待办事项列表

  `,

  data() {

  return {

  tasks: [“踢足球”, “玩游戏”, “看电视”]

  }

  },

  components: {

  todoAdd, //vue自动将其翻译为todo-add

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
  
  
  
  
  
  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  

  最后

  文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

  

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  

  伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

  由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

  如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
  [外链图片转存中…(img-mV3H5R0l-1712780635797)]

  最后

  文章到这里就结束了，如果觉得对你有帮助可以点个赞哦

  [外链图片转存中…(img-9uHdmSfa-1712780635798)]

  一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
  [外链图片转存中…(img-WYzvOM4I-1712780635798)]