javascript - VueJS 一次在子组件上显示一个元素

Question

所以我有几个组件<server-header> .它具有以下 HTML:

<span @click="$parent.changeOrder(column, $event)">
    <slot></slot>
    <i v-show="sortActive" class="order-arrow" :class="sort"></i>
</span>

这些组件被插入到另一个组件中<server-list> .这些将是标题，单击时将对一些列表进行排序。我的目标是一次只显示一个箭头图标。

例如:如果我点击第一个标题，箭头就会出现在那个标题上。如果我单击第二个标题，第一个标题的箭头会隐藏，第二个标题的箭头会出现。

例如，这对于 jQuery 来说很简单，但我有点不知道如何使用 VueJS 来做到这一点。

Answer 1

不要直接调用父函数。那是一个反模式。而是使用带有 sync 的双向数据绑定(bind)，这要容易得多。下面的粗略示例:

// server-list.vue
data() {
  return {
     selected: undefined
  }
}

<server-header v-for="(header, idx) in headers" :header="header" :selected.sync="selected" :idx="idx"></server-header

然后在 child 中，我们放弃 @click="$parent.changeOrder(column, $event)" 以支持:

@click="$emit('update:selected', idx)"

确保 server-header 具有预期的 Prop :

props: ['idx', 'header', 'selected']

然后确保我们将 idx 与我们的 header 索引进行比较:

<i v-show="selected === index"