谷粒商城实战笔记-41-前端基础-Vue-组件化基础

文章目录

一，组件
- 1，简介
- 2，全局组件
- - 3.1 组件定义
  - 2.2 在`html`模板中使用
  - 2.3 效果
- 3，局部组件
- - 3.1 定义
  - 3.2 在`html`模板中使用局部组件
  - 3.3 效果
完整代码

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。

例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

一，组件

1，简介

组件是可重用的 Vue 实例，拥有自己独立的作用域和状态。

组件是 Vue.js 的核心概念之一，将复杂的应用分解为更小的、可维护的部分，每个部分负责单一的功能。

组件可以拥有自己的模板、样式和行为逻辑，这使得它们可以像自定义 HTML 标签一样在页面中使用。

2，全局组件

3.1 组件定义

通过 Vue 的 component 方法来定义一个全局组件。


// 定义全局组件
Vue.component("counter", {template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',data() {return {count: 0}}
})

这段代码是在 Vue.js 中定义一个名为 “counter” 的全局组件。

这个组件是一个简单的计数器按钮，每当你点击按钮时，它会递增计数值并显示点击次数。

让我们逐行分析这段代码：

Vue.component("counter", {

这一行使用 Vue 的 component 方法来注册一个全局组件。"counter" 是组件的名字，后面跟着一个配置对象，描述了组件的结构和行为。

   template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',

template 字段定义了组件的模板，即组件渲染出来的 HTML 结构。

这里的模板是一个 <button> 元素，它包含一个内联的事件处理器 v-on:click="count++"，表示当按钮被点击时，count 变量将增加 1。

此外，按钮的文本中包含了一个 {{ count }} 插值表达式，它会显示 count 变量的值。

   data() {return {count: 0}}
})

data 函数返回一个对象，其中包含了组件的初始状态。在这个例子中，data 对象包含一个 count 属性，其初始值为 0。count 将作为组件的响应式状态，它的任何变化都会自动反映在模板中。

由于 data 是一个函数而不是一个对象字面量，这意味着每次创建一个新的 “counter” 组件实例时，都将得到一个新的数据对象，从而避免了不同组件实例之间共享状态的问题。

组件其实也是一个 Vue 实例，在定义时可以指定data、methods、生命周期函数等参数
不同的是组件不会与页面的元素绑定，不用指定 el 属性。
组件渲染需要 html 模板，使用template 属性指定 HTML 模板
全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
data 必须是一个函数，不是一个对象。

2.2 在`html`模板中使用

<div><counter></counter><counter></counter><counter></counter>
</div>

2.3 效果

在这里插入图片描述

从上图可以看到，定义了组件之后，就可以像使用html原生标签一样使用组件，且每个组件都有自己的状态，互不干扰，代码得到了最大程度的复用，可维护性和可读性大大提高。

3，局部组件

3.1 定义

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着 Vue 的加载而加载。

对于一些并不频繁使用的组件，可以采用局部注册。

先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const buttonCounter = {template: '<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',data() {return {count: 0}}
};

然后在 Vue 对象中使用它：

let app = new Vue({el: "#app",components: {'button-counter': buttonCounter // 将定义的对象注册为组件}
})

components 就是当前 vue 对象子组件集合。
其 key 就是子组件名称
其值就是组件对象名
效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的 Vue 实例中使用

简写：

let app = new Vue({el: "#app",components: {counter // 将定义的对象注册为组件}
})

3.2 在`html`模板中使用局部组件

<div><button-counter></button-counter>
</div>

3.3 效果

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><button v-on:click="count++">我被点击了 {{count}} 次</button><counter></counter><counter></counter><counter></counter><counter></counter><counter></counter><button-counter></button-counter></div><script src="../node_modules/vue/dist/vue.js"></script><script>//1、全局声明注册一个组件Vue.component("counter", {template: `<button v-on:click="count++">我被点击了 {{count}} 次</button>`,data() {return {count: 1}}});//2、局部声明一个组件const buttonCounter = {template: `<button v-on:click="count++">我被点击了 {{count}} 次~~~</button>`,data() {return {count: 1}}};new Vue({el: "#app",data: {count: 1},components: {'button-counter': buttonCounter}})</script>
</body></html>