Vue передает v-on подэлементу внутри компонента

Представьте себе компонент со следующей структурой HTML:

<template>
   <div class = "row">
      <div class = "innerRow">
         <div class = "outterLabel">
            <label class = "labelCss">{{label}}</label>
         </div>
         <div class = "outterField">
            <span style = "float: none; position: absolute;">
               <select ref = "selectField">
                  <option v-for = "item in list">{{item.name}}</option>
               </select>
            </span>
         </div>
      </div>
   </div>
</template>

Когда я использую этот компонент, я хочу передавать события v-on, но я хочу, чтобы они были прикреплены к элементу <select>, а не к <div> вверху. Есть ли способ добиться этого во Vue?

Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Все слушатели будут прикреплены к корневому элементу. Это поведение по умолчанию. Чтобы изменить это, вы можете использовать опцию $listeners.

Итак, чтобы можно было прикрепить слушателей к элементу select следующим образом:

<select v-on = "$listeners" ref = "selectField">
  <option v-for = "item in list">{{item.name}}</option>
</select>

Теперь вы можете прикреплять прослушиватели событий непосредственно к своему настраиваемому компоненту выбора.

<my-select v-on:change = "doSomething"></my-select>

Для получения дополнительной информации посетите - Создание полностью прозрачных компонентов оболочки

Спасибо. Это именно то, что мне было нужно.

Sérgio Serra 07.06.2018 09:07

Другие вопросы по теме