文章目录
在大型应用开发的时候,页面可以划分成很多部分。往往不同的页面,也会有相同的部分。
例如可能会有相同的头部导航。但是如果每个页面都独自开发,这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件,然后在不同页面就可以共享这些组件,避免重复开发。
一,组件
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>