组件是可复用的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>
运行结果:







Logo

前往低代码交流专区

更多推荐