Блог

У меня есть компонент «card» со многими «лицами».
Щелкните карточку, и она покажет другое лицо.

 <template lang="pug">
  .infini-card(@click.prevent="clickCard")
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>
  

У div «.infini-card» есть обработчик щелчков, и я могу сделать switch () там для обработки изменений для всех разных типов граней. Прохладный.

Но первое, что я попробовал, не сработало:

 <template lang="pug">
  .infini-card
    infini-card-empty(v-if="face==='empty'")
    infini-card-secret(v-if="face==='secret'" v-bind="cardData" @click.prevent="clickSecret")
    infini-card-reveal(v-if="face==='reveal'" v-bind="cardData")
</template>
  

Метод clickSecret() никогда не вызывается на лице v-if’d. Этот компонент создается в другом шаблоне pug, подобном этому: infini-card(v-bind.sync="cardA")

Почему? 🙂

Заранее спасибо!

Обратите внимание, что @click работает по-разному для собственных элементов и компонентов vue.

В собственном компоненте ( <div>, <button> ) @click прослушивается событие щелчка.

В пользовательском компоненте ( <infini-card-secret> ) @click прослушивается событие, вызывающее «щелчок» из этого пользовательского компонента ( this.$emit('click') )

• Чтобы убедиться, что @click прослушивается собственное событие щелчка в пользовательских компонентах, используйте .native модификатор, подобный этому:
• @click.native="clickSecret" .

Документы Vue: привязка собственных событий к компонентам