为每个使用过的 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 是作用域变量，每次您创建组件时都会创建它，因此您只会在组件的每个实例中递增一次。

您可以创建 "per module" 变量并递增它：

<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() 函数，因此这正是您所需要的。

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

Hook function call for every used vue component

javascript

vue.js

vue-component