Vue.js 将函数传递给道具无效

Question

我遇到一个问题，即向组件传递函数时无法按照文档中指定的方式工作。

这是我的 app.js

methods: {
    updateAnswer: function(question) {
        console.log('question: '+question);
    }
}

这是我的 html-文件：

<multiplechoice class="question counterIncrement counterShow active" id="q2" whenanswered="{{ updateAnswer('1') }}"></multiplechoice>

这在我的 components.js 文件中：

props: [
    'whenanswered'
],

ready: function() {
    this.whenanswered();
},

我已经试过了：

props: [
    { name: 'whenanswered', type: Function}
];

但还是没有运气。

当我加载页面时，这是在我的控制台中：

Uncaught TypeError: this.whenanswered is not a function

非常感谢任何帮助:)

Answer 1

一个fiddle会有所帮助，但基本上，你需要：

methods: {
    whenanswered: function(question) {
        ...
    }
}

如果您想调用该函数。道具只是一个字符串，而不是一个函数。

示例：

<div id="app">
    Loading...
    <data-table on-load="{{onChildLoaded}}"></data-table>
</div>

new Vue({
  el: "#app",
    methods: {
        onChildLoaded: function (msg) {
            console.log(msg);
        }
    },
    components: {
        'data-table': {
            template: 'Loaded',    
            props: ['onLoad'],
            ready: function () {
                this.onLoad('the child has now finished loading!')
            }
        }
    }
});

Answer 2

你可以这样做：

<multiplechoice class="question counterIncrement counterShow active" id="q2" :whenanswered="updateAnswer('1')"></multiplechoice>

没有像你那样的':'（与v-bind 相同）只会发送一个字符串而不会计算。即使有那些 {{ }}.

但请记住，您的 updateAnswer 函数应该 return 一个函数。因为你的 prop 将执行 updateAnswer('1') 而你的 multiplechoice 实际上需要一个函数，它会在需要时执行。

methods: {
  whenanswered: function(question) { // or whenanswered (question) { for ES6 
    return function () { ... } // or () => {...} for ES6
  }
}

Vue.js 将函数传递给道具无效

Vue.js passing functions to props not working

javascript

vue.js