主页 / coding / 问题 / 79198095
Accepted
volume one
Asked: 2024-11-18 04:29:12 +0800 CST

如何动态地将一个类应用于子组件？

  • 772

我在父组件中有一个子组件。每当单击子组件时，我都需要应用一个调用.selected它的类。

父级.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!!
}

 const Contacts = ref();
 onMounted(() => {
    const Result = await axios.get(`/api/contacts`);
    Contacts.value = Result.data
}
 )

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？我想在父级中设置它（或使用它的任何其他地方），然后在用户完成操作时删除该类。我觉得这比在子组件中设置它更灵活。

vue.js

1 个回答

  1. Best Answer

    尽可能避免 DOM 操作。
    不要自己应用类，而是让 Vue 来做：

    <my-component :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;
}
li:hover {
  background-color: #f5f5f5;
}
.selected {
  color: red;
}
#app {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
    <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>
  <pre v-text="JSON.stringify({ selected }, null, 2)" />
</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;
}
li:hover {
  background-color: #f5f5f5;
}
.selected {
  color: red;
}
#app {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
    <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>
  <pre v-text="JSON.stringify( { items }, null, 2)" />
</div>

    在每种情况下，我都会保留最小的本地状态（在父级中）。当状态被修改时，Vue 会更新模板。

    • 1

相关问题