javascript - 如何隐藏与当前值不匹配的元素并与prop进行比较

Question

我在一个页面上有不同的词组，比方说名词动词和形容词。描述每个组的方法是用它的“词性”。这个“词性”被打印在一个小盒子里。所以你在小方框里有组的“词性”，名词，我想实现这一点，当我点击那个方框时，我隐藏了动词和形容词。如果我点击动词，我会隐藏名词和形容词，等等。现在每个组的“词性”作为 prop 传入。

问题是我想将当前页面上存在的词性与单击的词性进行比较，但我无法区分它。

在我的模板中我有:

<div class="part-of-speech">
    <p class="pos">{{ pos }}</p>
</div>

这个{ pos } 来 self 的 Prop

props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
mounted() {
   console.log(this.pos)
}

这为我提供了页面上打印的所有词性(考虑到这是其他内容的子组件，并且这些词组的打印次数与组的次数一样多)。所以我认为添加一种方法来检测点击的词性会有所帮助。

<div class="part-of-speech" @click="handleSelectedPos(pos)">
    <p class="pos">{{ pos }}</p>
</div>

props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
methods: {
    handleSelectedPos(pos) {
        console.log(pos);
        console.log(this.pos);
    }
}

当我点击当前项目时，我得到了当前的词性，正如你所看到的，this.pos在这个上下文中不再是词性列表是在页面上，但它已成为当前点击的词性。我的想法是以某种方式在 pos 和 this.pos 之间进行比较，但它们现在是相同的。

如何比较say:如果有词性不等于当前点击的词性，则采取一些措施(添加类或wtv)隐藏该元素。

Answer 1

如果我理解的很好，你想实现什么，那么有些事件不应该由子组件处理，而应该由父组件处理。

Vue.component('partOfSpeech', {
  props: ['pos', 'text'],
  template: `<div :class="pos" @click='emitEvent'>{{text}}</div>`,
  methods: {
    emitEvent() {
      this.$emit('emitpos', this.pos)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    words: [{
        pos: 'noun',
        text: 'noun1',
        compare: false
      },
      {
        pos: 'verb',
        text: 'verb1',
        compare: false
      },
      {
        pos: 'adjective',
        text: 'adjective1',
        compare: false
      },
      {
        pos: 'noun',
        text: 'noun2',
        compare: false
      },
      {
        pos: 'verb',
        text: 'verb2',
        compare: false
      },
      {
        pos: 'adjective',
        text: 'adjective2',
        compare: false
      },
      {
        pos: 'verb',
        text: 'verb3',
        compare: false
      },
      {
        pos: 'noun',
        text: 'noun3',
        compare: false
      },
      {
        pos: 'adjective',
        text: 'adjective1',
        compare: false
      },
    ]
  },
  methods: {
    filterWords(val) {
      this.words.forEach(e => {
        if (e.pos === val) {
          e.compare = true
        } else {
          e.compare = false
        }
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <part-of-speech :key="i" v-for="(word, i) in words" :pos="word.pos" :text="word.text" v-on:emitpos="filterWords" :style="{ color: !word.compare ? 'black' : 'red'}" />
</div>

在上面的代码片段中你可以看到每一个

1. 数据作为 prop 传递给子组件(compare 除外 - 那里不需要)
2. 在每个子组件上都设置了一个点击事件，即 (@click) $emit() 一个事件及其返回给父组件的属性<
3. 父级有一个 v-on: 用于发出的事件，并且对所有词性执行一个函数(我的应用程序中的单词；该函数为单词着色与被点击的 pos 相同的红色)。

更多信息

问题在于兄弟元素彼此之间一无所知:它们不应该彼此共享任何信息。

组件 可以通过它们共同的父组件(通过发出事件(带有数据payload))或使用某种形式的状态管理解决方案(事件总线或Vuex存储在Vue中最常见strong> - 后者适用于严重的情况，前者适用于需要的不仅仅是简单的事件发射，但不需要任何非常复杂的事情。

Vue 中的自定义事件: https://v2.vuejs.org/v2/guide/components-custom-events.html

事件总线: https://alligator.io/vuejs/global-event-bus/

Vuex 状态管理: https://vuex.vuejs.org/