VUE-why-components-data-must-be-a-function

###话不多说上代码测试:

定义一个全局组件,绑定msg

  • 我们首先看如果把data的值外传不在组件里面创建的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<body>
<div id="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>

<template id="temp">
<div>
<input type="button" value="加一" @click='increment'>
<h3>{{count}}</h3>
</div>
</template>

<script>
var dataObj={count:0}
Vue.component('counter',{
template:'#temp',
data:()=>{
return dataObj
},
methods:{
increment() {
this.count++
}
}
})

var vm=new Vue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>.GIF

外传对象

  • 现在把dataObj注释, return {count:0}
1
2
3
4
5
6
7
8
9
10
11
12
//var dataObj={count:0}
Vue.component('counter',{
template:'#temp',
data:()=>{
return {count:0}
},
methods:{
increment() {
this.count++
}
}
})

改正后

总结:

官网解释比较抽象:

3后

不难看出,这里的关键点就在于 return {} 这个地方 如果是作用域外传入对象的话,上面三个组件的click方法都是处理的这个外部对象里面的count,所以他们作用于同样一个变量,但是如果是 return {count : 0}的话是写在template 内部的,所以每当你在page上渲染一个组件就会响应的创建一个count ,所以他们互不干预,在事件使用中我们可以根据这个小小的点实现不同需求的功能而省去多余的代码

本网站作品部分来自于网络,感谢开源社区的诸多开发者 My_Github and My_E-mail

Copyright © 2013 - 2019 Ruoduan's Blog All Rights Reserved.

滇ICP备19003866号 本网站版权归本站作者Ruoduan所有

访客数 : | 访问量 :

{% if theme.fireworks %} {% endif %} {% if theme.canvas_nest %} {% endif %} {% if theme.Background_music %} {% endif %}