2

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

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

在我的模板中，我有：

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

这{ pos }是来自我的道具

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，但它们现在是相同的。

如何进行比较说：如果有不等于当前单击的词性，请采取一些措施（添加类或 wtv）来隐藏元素。

4

1 回答 1

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. 数据作为道具传递给子组件（比较除外-那里不需要）
  2. 在每个子组件上设置一个点击事件，即 ( @click)$emit()一个事件及其道具返回给父组件
  3. 父级有一个v-on:用于发出的事件，并在所有词性上执行一个函数（我的应用程序中的单词；该函数将与单击的单词具有相同位置的单词着色为红色）。

更多信息

问题是兄弟元素不知道彼此的任何信息：它们不应该彼此共享任何信息。

组件可以通过它们的共同父级（通过发出事件（带有数据负载））或使用某种形式的状态管理解决方案（事件总线或Vuex 存储是Vue中最常见的）与兄弟组件共享其自己的唯一状态信息- 后者适用于严重的情况，前者适用于需要不仅仅是简单事件发射但不需要任何真正复杂的情况的场合）。

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

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

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

于 2019-10-11T15:39:39.350 回答