在上篇文章的基础上我们继续来介绍下Vue组件中的data和methods属性,这两个属性和我们介绍的Vue实例中data和methods属性很类似,使用方式也是一样的
先准备一个基础页面,在其中创建了一个自定义的组件,具体页面如下:
<!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>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<mycom></mycom>
</div>
<template id="com1">
<h3>自定义的Vue组件</h3>
</template>
<script >
Vue.component("mycom",{
template: "#com1"
})
var vm = new Vue({
el: "#app",
data: {} ,
methods: {}
})
</script>
</body>
</html>
注意 data 属性 我们需要显示的返回一个对象,而不是返回一个具体的数据
定义的data数据显示的返回一个对象,获取data中的数据的时候还是通过 插值 表达式来实现。
为什么要返回一个对象呢?这个我们稍后讨论
在Vue组件中我们也可以通过methods属性来定义组件自身的方法来供组件使用,和Vue实例中的methods的使用差不多,如下。
效果
以上就是 data 和 methods 属性的使用,接下来讨论下 data属性为什么必须要返回一个对象呢?
在这里大家需要搞 组件 和 Vue实例的区别,Vue实例是在页面加载的时候被实例化的,一个页面就一个,而 组件是可以复用的.也就是在一个页面中可以同一个组件可以有多个实例。如下案例
<!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>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<!--复用3个 Vue 组件-->
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<template id="tmpl">
<div>
<input type="button" value="加1" @click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
// 声明的全局对象
var dataObj = { count: 0 }
// 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
Vue.component('counter', {
template: '#tmpl',
data: function () {
return dataObj
//return { count: 0 }
},
methods: {
increment() {
this.count++
}
}
})
// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
</html>
复用了3个组件,实现分别累计,效果如下:
我们需要的是分别累计而不是都累计,修改如下:
每次复用的时候都给返回一个新的实例对象,让组件 实例之间数据独立
搞定~