每个已使用的vue组件的钩子函数调用

Question

每次使用vue组件时，我都想在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()函数，所以这正是您所需要的。