速記：粗淺的理解是，事件的結果是影響單個組件還是多個組件。因為大部分組件是要共享的，但他們的data是私有的，所以每個組件都要return一個新的data對象
返回對象的時候
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="components-demo3" class="demo">
<button-counter2></button-counter2>
<button-counter2></button-counter2>
<button-counter2></button-counter2>
</div>
<script>
Vue.component('button-counter2',{
data:function(){
return {
count:0
}
},
template:'<button v-on:click="count++">點擊了{{count}}次</button>'
})
new Vue({
el:'#components-demo3'
})
</script>
</body>
</html>
data直接返回值的時候
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="components-demo3" class="demo">
<button-counter2></button-counter2>
<button-counter2></button-counter2>
<button-counter2></button-counter2>
</div>
<script>
buttonCounter2Data={
count:0
}
Vue.component('button-counter2',{
data:function(){
return buttonCounter2Data
},
template:'<button v-on:click="count++">點擊了{{count}}次</button>'
})
new Vue({
el:'#components-demo3'
})
</script>
</body>
</html>
