2024年最新Vue（六）组件、组件化开发，字节跳动+京东+美团+腾讯面试总结

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

---

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

组件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

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

  }

  })

  组件todoAdd.js

  var todoAdd = {

  props: [“tasks”],

  template: `

  <button @click=“add”>+

  `,

  methods: {

  add() {

  this.tasks.push(this.t);

  this.t = “”

  }

  }

  }

  组件todoList.js

  var todoList = {

  props: [“tasks”],

  template: `

• `,

  components: {

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

  }

  }

  组件todoItem.js

  var todoItem = {

  props: [“t”, “i”, “tasks”],

  template: `

• {{i+1}} - {{t}}

• `,

  methods: {

  del() {

  // 从数组中删除一个元素

  this.tasks.splice(this.i, 1)

  }

  }

  }

  首页index.html

  效果如下：

  初始页，

  

  删除，

  

  

  添加，
  

  最后

  为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  

  

  ](https://i-blog.csdnimg.cn/blog_migrate/a3953ad5d33ea5b77500dbdbc944f403.png)

  最后

  为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】