在Vuejs中将功能作为prop传递不起作用

问题描述

我试图创建一个自定义选择器，该选择器我会多次重复使用，并且我想为选择时必须触发的功能设置一个prop。这是我的代码（仅包含其中的相关部分）：

主选择器：

<template>
 <div>
    <select name="selector" >
        <option :key="option" v-for="option in options" @change="selection"> {{option}} </option>
    </select>
 </div>
</template>

<script>
export default {
  name: 'CoffeeSelector',props: {
    options: Array,selection: Function
  },}
</script>

我使用它的页面：

<template>
  <div>
    <custom-selector :options='types' :selection="coucou"> </custom-selector>
  </div>
</template>

<script>
import CustomSelector from './CustomSelector.vue'

export default {
  name: 'Selectors',components: {
    CustomSelector
  },methods: {
    coucou(){
      console.log("coucou")
    }
  }
}
</script>

执行此操作时，更改选择无任何反应。关于它为什么发生的任何想法？预先感谢

解决方法

您可以向父组件发出事件。

<template>
 <div>
    <select name="selector" >
        <option :key="option" v-for="option in options" @change="onOptionChange(option)"> {{option}} </option>
    </select>
 </div>
</template>

<script>
export default {
  name: 'CoffeeSelector',props: {
    options: Array
  },methods: {
    onOptionChange(option) {
      this.$emit('selection',option);
    }
  }
}
</script>

然后，您可以在父组件中监听这些事件。

<template>
  <div>
    <custom-selector :options='types' v-on:selection="coucou"> </custom-selector>
  </div>
</template>

<script>
import CustomSelector from './CustomSelector.vue'

export default {
  name: 'Selectors',components: {
    CustomSelector
  },methods: {
    coucou(option){
      console.log("coucou: " + option)
    }
  }
}
</script>

,

尝试将您的re-queue移至@change标记

select