Vueコンポーネントの多重化

コンポーネントは多重化可能なVueインスタンスです
1.new Vueによって作成されたVueルートのインスタンスで、このコンポーネントをカスタム要素として使用できます.
注意ボタンをクリックすると、各コンポーネントは独立してcountを維持します.コンポーネントを使うたびに新しいものがあるからです
≪インスタンス｜Instance｜emdw≫
作成されます.
このコンポーネントを定義すると、dataがこのように直接オブジェクトを提供していないことがわかります.

data: {
  count: 0
}

だから
コンポーネントのdataオプションは関数でなければなりません
これにより、各インスタンスは、返されるオブジェクトの独立したコピーを維持できます.

data: function () {
  return {
    count: 0
  }
}

コード:

    
    
    
    


    Vue.component("jishuqi",{
        data:function () {
                return {
                    count:0
                }
        },
        template:'<button v-on:click="count+=1">   {{count}} </button>'
    })
    var v=new Vue({
        el:"#pp"
    })

実行結果:
2.
Vueにこのルールがない場合は、ボタンをクリックすると次のコードのように影響する可能性があります.

    
        {{counter}}
        {{counter}}
        {{counter}}
        {{counter}}
    
     {{counter}} 

  
      var v=new Vue({
          el:"#p",
          data:{
              counter:0
          }
      })
  

実行結果: