我在一页上有不同的词组,比方说名词、动词和形容词。描述每一组的方法是用它的“词性”来描述。这个“演讲部分”是印在一个小盒子里的。所以你有这个小组的“词性部分”,名词,在这个小盒子里,我想要实现这一点,当我点击那个框时,我隐藏了动词和形容词。如果我点击动词,我就会隐藏名词和副词,等等。现在,每个群体的“部分讲话”正被作为一种道具来传递。
问题是,我想比较当前页面上存在的词性部分和单击的部分,但我无法区分它。
在我的模板里我有:
<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)来隐藏元素。
发布于 2019-10-11 15:39:39
如果我很清楚,您想要实现什么,那么有些事件不应该由子组件来处理,而应该由父组件来处理。
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>
在上面的片段中你可以看到
@click
) $emit()
事件及其支持返回到父组件H 212H 113父程序具有E 114v- on:E 215,E 116对<语音代码>E217
(我的应用程序中的单词)的所有部分执行一个函数;函数将具有与单击的pos相同的单词颜色为红色)。更多信息
问题是兄弟元素不知道彼此的任何信息:它们不应该彼此共享任何信息。
组件可以通过其公共父级(通过发出事件(具有数据有效载荷))或使用某种形式的状态管理解决方案(事件总线<代码>E 231或E 132
Vuex存储<代码>E 233)与同级组件共享自己的唯一状态信息,这是E 134
VueVueE 235中最常见的--对于严重的情况,前者适用于需要简单事件发射但不需要任何真正复杂的事情的场合。
Vue中的自定义事件: https://v2.vuejs.org/v2/guide/components-custom-events.html
事件总线: https://alligator.io/vuejs/global-event-bus/
Vuex状态管理: https://vuex.vuejs.org/
https://stackoverflow.com/questions/58343496
复制相似问题