Question

想象一下具有以下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实现这一目标？

由于

Answer 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>

有关详细信息，请查看 - Building fully transparent wrapper components

Vue将v-on传递给组件内的子元素

1 个答案: