如何动态地将类应用到子组件？

Question

我在父组件中有一个子组件。每当单击子组件时，我都需要对其应用一个名为

.selected

的类。

Parent.vue

<template>
   <ol>
    <li v-for="(Contact, index) in Contacts">
      <Component-Contact :ref="(el) => { RefContacts[index] = el}" @click="onClick(RefContacts[index])" :Contact="Contact" @Selected="(Data) => onSelected(Data)"/>
     </li>
   </ol>

</template>
<script>
import ComponentContact from '../components/Contact.vue'
....
setup() {
const RefContacts = ref([]);

function onSelected(Contact){
  //Adds data received from child component to an array
}

onClick(el) {
 el.toggleClass('selected') // Returns error saying toggleClass is not a function!!
}

return {
  Contacts, // An array of contacts from the DB
  onSelected
}
}
</script>

子组件Contact.vue

<template>
 <div style="cursor: pointer" @click="onClick($el, Contact)">
  <p>{{Contact.Forename}}</p>
  <p>{{Contact.Surname}}</p>
 </div>
</template>
<script>
...
props: {
  Contact: {
    type: Object,
    required: true
   },
emits: 'Selected',
setup() {

  function onClick(el, Contact) {
   el.toggleClass('selected') // This works but I don't want to set it here in the child
   return context.emit('Selected', {
   FullName: Contact.forename + ' ' + Contact.surname
   }
 }

}
</script>

如何让 Vue 将

.selected

类应用到

<Child-Component />

视图中的

Parent.vue

？我想将它设置在父组件中（或使用它的其他地方），然后在用户完成他正在做的事情时删除该类。我觉得这比在子组件中设置它更灵活。

Answer 1

首先，您不应该自己在 DOM 元素上应用该类。
使用

:class="{ selected: /* condition here */ }"

一个基本示例，其中只能选择一个项目（选择另一个项目将取消选择前一个项目）：

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const selected = ref(null)
    return {
      selected,
      select: (index) =>
        (selected.value = selected.value === index ? null : index)
    }
  }
}).mount('#app')

li {
  cursor: pointer;
}
.selected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(_, index) in 6"
      @click="select(index)"
      :class="{ selected: index === selected }"
      v-text="'item'"
    />
  </ul>
</div>

---

您可以在此处单独选择项目：

const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const items = ref(
      Array.from({ length: 7 }).map(() => ({ selected: false }))
    )
    return {
      items,
      toggle: (index) =>
        items.value.splice(index, 1, { selected: !items.value[index].selected })
    }
  }
}).mount('#app')

li {
  cursor: pointer;
}
.selected {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script>
<div id="app">
  <ul>
    <li
      v-for="({ selected }, index) in items"
      @click="toggle(index)"
      :class="{ selected }"
      v-text="'item'"
    />
  </ul>
</div>