Question

我的Vue应用程序中的每种不同表单类型（单选按钮，文本字段，复选框等）都有单独的组件。我在我的应用程序中使用这些组件来减少代码和设计时间。

我已经将数据传递给这些组件，但是我想知道如何动态传递在不同事件侦听器上触发的不同方法。这是我在做什么的示例：

//SelectField.vue
<template>
<select>
  <option v-for="(option,key) in options" value="'{option}'">{{option}}</option>
</select>
</template>

//ParentExample1.vue
<template>
<div>
  <select-field @change="doThis" @click="doClickAction1"/>
</div>
</template>

//ParentExample2.vue
<template>
<div>
  <select-field @change="doThat" @click="doClickAction2"/>
</div>
</template>

Answer 1

您可以通过$listeners进行此操作。在最基本的级别上，将v-on="$listeners"添加到您想要将侦听器传递给的元素：

<select v-on="$listeners">
  <option v-for="(option,key) in options" value="'{option}'">{{option}}</option>
</select>

这里是example的动作。

要使其与v-model一起使用，您可能需要采取其他步骤，Custom Events中的示例对此进行了很好的说明。像这样：

<template>
  <select v-bind="$attrs" v-bind:value="value" v-on="selectListeners">
    <option v-for="(option,key) in options" value="'{option}'">{{option}}</option>
  </select>
</template>

<script>
  export default {
    name: "SelectField",
    inheritAttrs: false,
    props: ['value', 'options'],
    computed: {
      selectListeners: function () {
        const vm = this;

        return Object.assign({}, this.$listeners, {
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        });
      }
    }
  };
</script>

用法：

<SelectField v-model="value" :options=“myOptions” @change="someHandler" @click="anotherHandler" />

这是v-model中的example，其中正在使用自定义组件。

希望有帮助！

将方法动态传递给子组件

1 个答案: