Question

我试图创建一个自定义选择器，该选择器我会多次重复使用，并且我想为选择时必须触发的功能设置一个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>

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

Answer 1

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

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

Answer 2

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

select

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

2 个答案: