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

你可以这样做：

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

没有'：'（与v-bind相同）就像你所做的那样只发送一个字符串而不进行评估。即使是那些{{ }}。

但请记住，您的updateAnswer函数应该返回一个函数。由于您的道具将执行updateAnswer('1')，而您的multiplechoice实际上需要一个将在需要时执行的函数。

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

Answer 2

小提琴会有所帮助，但基本上，你需要：

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!')
            }
        }
    }
});

Vue.js将函数传递给不起作用的道具

2 个答案: