在Vue.js中将方法从父组件传递到子组件

Question

有人能帮我在vue.js中将一个方法从父组件传递给子组件吗？我一直尝试通过将方法作为prop传递来实现...

我的父组件代码片段：

methods: { 

    test: function () {
        console.log('from test method')
    }

}

<template>
    <child-component test="test"><child-component>
</template>

子组件片段

created: {
    this.test() //returns test is not a function
},

props: ['test']

有人能帮忙吗？

提前致谢！

- Trung Tran

---

https://michaelnthiessen.com/pass-function-as-prop/ - Danilo Cândido

Answer 1

您试图像此处描述的那样将一个函数作为文字传递。结果导致test属性成为字符串...您应该使用:来表示以下动态绑定： <child-component :test="test"></child-component>

- pkawiak

---

已确认可用，尽管您可能需要考虑混合。 - gurghet

是的，完全正确。如果你只是为了实现代码重用而传递它，请使用 mixins。 - pkawiak

这取决于你想要实现什么：如果你只想使用注入函数的一个变体，混合可能也能解决你的问题，但是如果你想根据父组件使用不同的变体，混合将无法工作。有趣的是，如果prop值是一个函数，它会传递给客户端，而如果prop值是包含一个函数字段的对象，则相应的字段将从进入子组件（原始值的克隆）的prop值中剥离。 - Remigius Stalder