本文我们来介绍下Vue中的组件,组件是可复用的 Vue 实例,且带有一个名字。
组件的创建
extend方式
首先通过 Vue.extend
方法来定义一个全局组件。template
就是组件将来要展示的HTML内容。然后通过 Vue.component
来添加我们的组件。(注意:组件的名称如果采用的是 驼峰命名法 ,那么在使用组件的时候,大写必须改为小写,而且要用 “-”连接。)
<div id="app">
<my-com></my-com>
</div>
<script>
// 使用 Vue.extend 创建全局的Vue组件
var com1 = Vue.extend({
template: "<h3>这是个Vue组件</h3>"
})
// 使用 Vue.component('组件名称', 创建出来的组件对象) 添加组件
Vue.component("myCom",com1);
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
简写方式
在前面的基础上,我们可以简写 Vue.extend() 创建全局Vue组件的操作。
<div id="app">
<my-com></my-com>
</div>
<script>
Vue.component("myCom",{
template: "<div><h3>这是个Vue组件</h3><p>Vue组件</p></div>"
})
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
注意: 创建的组件中HTML元素只能有一个root标签,如果有多个时会报错,建议在所有元素最外层用< div>标签包起来。
template标签
在上面的例子中我们的组件元素都是直接在 template 中直接通过字符串来声明的,这种方式书写时没有智能提示,容易出现错误,这时我们可以通过<template>
标签来定义组件HTML元素,然后通过id来使用。
<div id="app">
<my-com></my-com>
</div>
<template id='com'>
<h3>这是个Vue组件</h3>
</template>
<script>
Vue.component("myCom",{
template: "#com"
})
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
私有组件
上面定义的都是全局的组件,接下来我们看看如何在单个Vue实例中定义私有的组件。
<div id="app">
<my-com></my-com>
</div>
<div id="app1">
<my-com></my-com>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
},
//定义私有组件
components:{
'myCom':{
template: "<h3>这是一个私有组件</h3>"
}
}
})
</script>
组件中的data和methods属性
组件中的这两个属性和Vue实例中的 data 和 methods 属性很类似,使用方式也是一样的。需要注意的是,组件中定义的 data 必须是一个函数,并且返回一个对象。
<div id="app">
<my-com></my-com>
</div>
<script>
Vue.component("myCom",{
template:`
<div>
<button @click='show'>调用方法</button>
<h3>这是个Vue组件,{{id}}:{{name}}</h3>
</div>
`,
data:function(){
return {id:1,name:'my-com'}
},
methods:{
show(){
console.log('组件中的show方法被调用')
}
}
})
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
以上就是 data 和 methods 属性的使用,接下来我们讨论一下 data 属性为什么必须要返回一个对象呢?
我们要清楚组件和Vue实例的区别:Vue实例是在页面加载的时候被实例化的,一个页面就一个;而组件是可以复用的,也就是在一个页面中同一个组件可以有多个实例。如下案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--复用3个Vue组件-->
<counter></counter>
<counter></counter>
<counter></counter>
</div>
<template id="tmpl">
<div>
<button @click="increment">加1</button>
<h3>{{count}}</h3>
</div>
</template>
<script>
// 声明的全局对象
var dataObj = { count: 0 }
// 这是一个计数器的组件, 点击按钮,count值+1
Vue.component('counter', {
template: '#tmpl',
data: function () {
return dataObj
},
methods: {
increment() {
this.count++
}
}
})
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</body>
</html>
通过演示我们可以看到,三个组件同时进行了累加,而我们需要的是分别累加互不干扰。
在data属性中返回一个对象,组件每次复用的时候都给返回一个新的实例对象,让组件实例之间数据独立。