VueJS一次在子组件上显示一个元素答案

【问题标题】：VueJS Show element on child component one at a timeVueJS一次在子组件上显示一个元素
【发布时间】：2018-09-19 16:19:58
【问题描述】：

所以我有几个组件<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 做到这一点有点迷茫。

【问题讨论】：

在<server-list>组件内部，创建一个数据属性=selected，然后将selected == index传递给组件的props=sort-active=<server-header>就像<template v-for="(item, index) in serverlist"><server-header sort-active="selected == index"></server-header></template>一样

标签： javascript vue.js

【解决方案1】：

不要直接调用父函数。那是一种反模式。而是使用 sync 的 2-way 数据绑定，这更容易。下面的粗略示例：

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

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

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

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

确保server-header 具有预期的这个道具：

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

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

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

【讨论】：

【解决方案2】：

我假设您使用 v-for 指令渲染 <server-header> 组件，在您的 <server-list> 组件 data 属性中循环 server_headers 属性。

我这样做的方法是向<server-header> 组件添加一个道具，例如selected，然后我向每个server_headers 对象添加一个selected 属性。然后，如果对应的selected 属性为真，我会使用 v-show 渲染图标 (<i>)。

像这样：

server-list component

Vue.component('server-list', {
    data: () => ({
        server_headers: [{key: value, selected: true}, {key:value, selected:false}]
    }),
    template: `
      <div> 
           <server-header v-for="header of server_headers" :v-key="somekey" :selected="header.selected"></server_header>
      </div>
`
}

Vue.component('server-header', {
     props: ['selected'],
     template: `
         <span @click="$parent.changeOrder(column, $event)">
             <slot></slot>
             <i v-show="selected" class="order-arrow" :class="sort"></i>
         </span>
     `
})

然后，如果我单击箭头，我将取消设置所有 selected 属性，并设置我单击的那个。我希望这会有所帮助！！！！

【讨论】：