组件是可复用的Vue实例
1.我们可以在一个通过new Vue创建的 Vue 根实例中,把这个组件作为自定义元素来使用:
注意当点击按钮时,每个组件都会各自独立维护它的count。因为你每用一次组件,就会有一个它的新
实例
被创建。
当我们定义这个 <jishuqi> 组件时,你可能会发现它的data 并不是像这样直接提供一个对象:
data: { count: 0 }
所以
一个组件的data选项必须是一个函数
,因此每个实例可以维护一份被返回对象的独立的拷贝:
data: function () { return { count: 0 } }
代码:
<body> <div id="pp"> <jishuqi></jishuqi> <jishuqi></jishuqi> <jishuqi></jishuqi> <jishuqi></jishuqi> </div> <script> Vue.component("jishuqi",{ data:function () { return { count:0 } }, template:'<button v-on:click="count+=1">点击了{{count}}次</button>' }) var v=new Vue({ el:"#pp" }) </script> </body>运行结果:
2.
如果 Vue 没有这条规则,点击一个按钮就可能会像如下代码一样影响到
<body> <div id="p"> <!--<button v-on:click.once="counter+=1">增加点击次数1</button>--> <button v-on:click="counter+=1">点击次数{{counter}}</button> <button v-on:click="counter+=1">点击次数{{counter}}</button> <button v-on:click="counter+=1">点击次数{{counter}}</button> <button v-on:click="counter+=1">点击次数{{counter}}</button> <p>目前点击了{{counter}}次</p> </div> <script> var v=new Vue({ el:"#p", data:{ counter:0 } }) </script> </body>
运行结果: