每個使用的vue組件的鉤子函數調用

Question

我想在每次使用該組件時在我的vue組件中引發一個計數器。我們的目標應該是與counter即name="tool-2"

這裏的後綴名是我的.vue文件： ToolGuiComponent.vue：

<template> 
    <div> 
    <label>{{elementName}}</label> 
    <input type="text" :name="getCount()"></input> 
    </div> 
</template> 

<script> 
    export default { 
     name: 'tool-gui-component', 
     props : ['elementName'], 
     data : function(){ 
      return { 
       counter : 0 
      } 
     }, 
     created : function(){ 
      this.counter++ 
     }, 
     methods : { 
      getCount : function() { 
       return "tool-"+this.counter 
      } 
     } 
    } 
</script> 

<style> 

</style> 

我與created鉤嘗試過，但它只是提出通過計數器1.使用ready也沒有幫助。可悲的是我找不到任何組件鉤子的API列表。

Answer 1

就你的情況而言，counter是作用域變量，它在每次創建組件時都會創建，因此每增加一個組件實例就只會增加一次。

您可以創建「每個模塊的」變量並增加它：

<template> 
    <div> 
    <label>{{elementName}}</label> 
    <input type="text" :name="getCount()"></input> 
    </div> 
</template> 

<script> 
    var counter = 0; 

    export default { 
     name: 'tool-gui-component', 
     props : ['elementName'], 
     created : function(){ 
      counter++ 
     }, 
     methods : { 
      getCount : function() { 
       return "tool-" + counter 
      } 
     } 
    } 
</script> 

編輯： 另外在你的情況，你甚至不需要getCount功能，你可以簡單地做它作爲：

<template> 
    <div> 
    <label>{{elementName}}</label> 
    <input type="text" :name="name"></input> 
    </div> 
</template> 

<script> 
    var counter = 0; 

    export default { 
     name: 'tool-gui-component', 
     props : ['elementName'], 
     data() { 
      name: 'tool-' + (counter++) 
     } 
    } 
</script> 

原因是.data()函數將在每次創建組件的新實例時被調用，因此它正是您所需要的。