Vue（六）组件、组件化开发(1)

整个页面甚至整个项目只有一个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

  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

  效果如下：

  初始页，

  最后

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

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

  

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

  深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

  [外链图片转存中…(img-atc7FMNw-1715705501110)]

  [外链图片转存中…(img-CZyYT0NQ-1715705501110)]

  [外链图片转存中…(img-McHNiyzk-1715705501111)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

  如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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