作为一个看了几天Vue的新手，把大致内容过了一遍，目前正在逐章系统的学习。
在学习“组件”(component)一章时，我感觉我陷入了误区，始终走不出来。
我始终无法理解data 和 prop的区别，于是做了一些尝试。
我先写了一个child组件，并且设置了data的内容，如下：
<body>
<div id="app">
<child></child>
<child></child>
<child></child>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {},
components: {
'child': {
template: '<p v-on:click="count++">你点击了我{{count}}次</p>',
data: function() {
return {
count: 0
}
}
}
}
})
</script>
</body>
此时点击任何一个结果，内容都是独立的不受影响，但是我却无法改变其中的任何一个。
例如，我想让第一条和第二条结果默认是0，第三条默认是40，这样无法实现。（也可能是因为我还不会别的方法）
随后，我用prop方法来实现同样的内容，代码如下：
<body>
<div id="app">
<child count=0></child>
<child count=0></child>
<child count=0></child>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
},
components: {
'child': {
template: '<p v-on:click="count++">你点击了我{{count}}次</p>',
props:['count']
}
}
})
</script>
</body>
此时我同样实现了一开始的功能，现在我修改第三条默认为40。
方法1:
<div id="app">
<child count=0></child>
<child count=0></child>
<child count=40></child>
</div>
运行，有效。
方法2:
<div id="app">
<child count=0></child>
<child count=0></child>
<child v-bind:count="count"></child>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
count:40
},
components: {
'child': {
template: '<p v-on:click="count++">你点击了我{{count}}次</p>',
props:['count']
}
}
})
</script>
</body>
运行，有效。
添加一个点击事件试试：
<body>
<div id="app">
<child count=0></child>
<child count=0></child>
<child v-bind:count="count"></child>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
count:40
},
components: {
'child': {
template: '<p v-on:click="count++" v-on:click="change">你点击了我{{count}}次</p>',
props:['count'],
methods:{
change(){
if(this.count == 45){
this.count = 40
}
console.log(this.count)
}
}
}
}
})
</script>
</body>
运行了一下没什么问题，互相没有影响，当然，如果在组件里以data的方式来传递数据，再添加点击事件也是没问题的。
总结：我所认为的prop和data的区别：
data:
1、如果作为复用代码来使用的话，很方便。
2、无法任意修改里面的值，如果通过methods来修改了数据，那么也是统一修改。如下：
'child': {
template: '<p v-on:click="count++" v-on:click="change">你点击了我{{count}}次</p>',
data:function(){
return {
count:40
}
}
效果：
props:
1、可以按需修改所引用的值。
2、可以通过vue实例中的data来动态绑定数据。
以上都是我个人简介，如果有误，请指正。
网友评论