vue.js将函数作为prop传递给组件

时间:2018-08-27 12:34:01

标签: vue.js components

我正在尝试将功能传递给组件
html

<v-select :options="[
              {label:'ll', value:'vv'},
              {label:'ll', value:'vv'},
              {label:'ll', value:'vv'},
              {label:'ll', value:'vv'},
            ]" :s_onchange="doo()"   ></v-select>

Vue.js

let myVue = new Vue({
    el:'#myVue',
    data:{ 
    },  
    methods:{
          doo(){
             console.log('doo');
          }
  }//End methods
});

组件代码

<template>
     <div>
         <p> some text </p>
     </div>
</template>
<script>
    export default { s_onchange: Function },
    mounted() {
         this.s_onchange()
}
</script>

问题是这个。s_onchange不是一个函数
如果找到解决方案是 在Vue.js

doo(){
    return function (){
           console.log('doo');
      } 
}

还有其他方法可以摆脱返回函数

1 个答案:

答案 0 :(得分:0)

从更改绑定表达式

:s_onchange="doo()"

:s_onchange="doo"

doo()将在绑定时立即调用该函数,并将该调用的结果传递给s_onchange道具,而doo仅传递该函数实例本身。

我还应该提到,这种情况应该利用事件而不是通过prop传递函数(除非您出于某些特定原因而需要函数prop而不是事件)。