每个使用的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()函数将在每次创建组件的新实例时被调用，因此它正是您所需要的。