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的2路数据绑定，这要容易得多。下面是一个粗略的示例：

// 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"

Answer 2

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

我这样做的方法是向<server-header>组件（如selected）添加一个道具，然后为每个selected对象添加一个server_headers属性。然后，如果对应的<i>属性为true，我将通过v-show渲染图标（selected。

赞：

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属性，并设置我单击的属性。希望对您有所帮助！！！

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

2 个答案: