在 Vuejs 中将函数作为道具传递不起作用答案

【问题标题】：Passing function as prop in Vuejs is not working在 Vuejs 中将函数作为道具传递不起作用
【发布时间】：2020-09-06 12:12:08
【问题描述】：

我正在尝试创建一个自定义选择器，我将多次重复使用该选择器，并且我想将一个道具设置为在进行选择时它必须触发的功能。这是我的代码（只有它的相关部分）：

主选择器：

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

当我这样做时，当我更改选择时没有任何反应。关于为什么会发生的任何想法？提前致谢

【问题讨论】：

标签： vue.js vue-props vue-directives

【解决方案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>

【讨论】：

【解决方案2】：

尝试将您的 @change 移动到 select 标记

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

【讨论】：