Question

如果我正在动态地创建 n 组件的数量，其中每个组件需要从其自己的模板中引用唯一索引/ id /引用是否有这样的事情？我没有使用for in循环来生成组件，所以我认为我无法访问（读取：已经尝试使用...）$index。

我一起（很糟糕）一个非常糟糕的例子，我正在尝试做什么，但我怀疑有一个预建的方法。

https://jsfiddle.net/itopizarro/dw070yyL/

Answer 1

在我阅读有关您不想使用$index的部分之前，我做了一个完整的示例，所以这里的示例如果有帮助：https://jsfiddle.net/dw070yyL/1/

但您可以使用v-ref为子组件提供唯一标识符，请参阅http://vuejs.org/api/#v-ref

<bar v-ref:bar-one></bar>

然后在父组件中，您可以使用this.$refs.barOne来引用该子组件。

这也适用于文档中的列表：

<bar v-ref:bar-list v-for="item in list"></bar>

会使this.$refs.barList成为子组件数组

我还会说你做的方式也不错，例如this Wizard component通过在this.$children函数中迭代ready()来使用类似的方法，相应地设置每个索引：

  ready() {
    this.countItems = this.$children.length

    this.$children.forEach((item, index) => {
      item.index = index
    })
  }

Answer 2

您可以使用一种方法来分配模板中的索引，而无需使用ready函数。

Vue.component('task', {
  methods: {
    onStartGetIndex() {
      this.$index = this.$root.$children.length;
      return this.$index;
    }
  },
  template: '<li>{{ onStartGetIndex() }}</li>'
});

或将索引保存在属性中，以便在模板中进行更多引用。

Vue.component('task', {
  methods: {
    onStartGetIndex() {
      this.$index = this.$root.$children.length;
      return this.$index;
    }
  },
  template: '<li :index="onStartGetIndex()">{{ this.$index }}</li>'
});

以上两种方法只有在进行更改然后刷新组件后才起作用。

您可以添加找到索引的方法，并在找不到索引时使用长度。

  Vue.component('task', {
    methods: {
      getIndex() {
        if (this.$root.$children.indexOf(this) == -1) {
          this.$index = this.$root.$children.length;
        } else {
          return this.$root.$children.indexOf(this);
        }
      },
    },
    template: '<li>{{ getIndex() }}</li>'
  });

有没有办法从其模板中访问Vue组件的索引 - 或其他一些唯一标识符？

2 个答案: