Vue 组件基础
本节我们将介绍如何使用组件(Component),组件是 Vue.js 最强大的之一,组件可以扩展 HTML 元素,封装可重用的。组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为组件树:
组件是可复用的 Vue 实例,且带有名字。 —— 官方定义
组件是可复用的 Vue 实例, 我们可以把中在多个场景中重复使用的部分,抽出为组件进行复用。组件大大提高了的复用率。
我们可以通过 Vue.component
的方式来定义全局组件,它接收两个参数:1. 组件名,2. 组件对象。
命名:
对象:组件的对象即为 Vue
的实例对象。
全局组件可以在任何其他组件内使用,所以当我们设计的组件,需要在不同地方使用的时候,我们应当全局组件。
//
// 驼峰命名
Vue.component('MyComponentName', {/* */})
// 短横线命名
Vue.component('my-component-name', {/* */})
......
// 使用
<my-component-name></my-component-name>
// 也可以使用自闭和的方式
<my-component-name />
具体示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component />
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('myComponent', {
template: '<div>Hello !</div>'
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>
解释:
JS 第 3-5 行,我们了全局组件 myComponent,并在 html 内使用两种方式引用了该组件。
我们也可以在 Vue
实例选项中局部组件,这样组件只能个实例中使用。局部组件的利用 Vue
实例的 components
对象,以组件名作为 key
值,以对象作为 value
。由于局部组件只能在当前的 Vue
实例中使用,所以当我们设计的组件不需要在其他组件内复用时,可以设计为局部组件。
//
components: {
'MyComponentName': {
template: '<div>Hello !</div>'
}
}
......
// 使用
<my-component-name></my-component-name>
// 也可以使用自闭和的方式
<my-component-name />
具体示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component />
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
components: {
'myComponent': {
template: '<div>Hello !</div>'
}
}
})
</script>
</html>
解释:
JS 第 5-9 行,我们在当前实例上了局部组件 myComponent,并在 html 内使用两种方式引用了该组件。
在之前章节我们学习了 Vue
实例,其实,所有的 Vue
组件也都是 Vue
的实例,他们也可以接收同样的参数,并且有相同的生命周期钩子。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('myComponent', {
template: '<div><div>{{ count }}</div><button @click="add"></button></div>',
data() {
return {
count:
}
},
methods: {
add() {
this.count = this.count + ;
}
},
created() {
console.log('组件myComponent:created')
}
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>
解释:
JS 第 3-18 行,了全局组件 myComponent,并定义了 data 数据、 methods 、created 生命周期。
你可以将组件进行任意的复用,他们之间相互独立,互不影响:
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
< name="viewport" content="width=device-width, initial-scale=1.0">
< http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('myComponent', {
template: '<div><div>{{ count }}</div><button @click="add"></button></div>',
data() {
return{
count:
}
},
methods: {
add() {
this.count = this.count + ;
}
},
})
var vm = new Vue({
el: '#app',
data() {
return {}
}
})
</script>
</html>
解释:
html 第 2-4 行,我们来使用三次组件 myComponent。他们之间是相互独立的,当点击按钮时,每个组件都会各自独立维护它的 count。因为我们每使用一次组件,就会有它的新实例被创建。
当我们定义这个 <myComponent>
组件时,你可能会发现它的 data 并不是像这样直接提供对象:
data: {
count:
}
这是因为,组件的 data 选项必须是,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () {
return {
count:
}
}
在本小节,我们学习了在项目中如何使用组件式开发,主要有以下知识点: