如何从子组件调用父组件的方法?

Question

我有一个名为ZimModel.vue的子组件，我在其中创建了一个方法drawGrid()。我需要在父组件(mainPage.vue)中调用此方法。我们的想法是，一旦用户在输入中完成输入值(即:网格的宽度—我将@input事件添加到v-model="inputWidth")，就调用此方法。这就是为什么我也使用setTimeout与5秒延迟。然而，我不知道如何"发送"这个方法到父组件。我尝试了emit，但我认为这没有任何意义。我在我的应用程序中使用Vuex商店，但这种特殊的方法与ZimModel.vue中的其他数据和方法严格相关，所以我认为将其移动到Vuex是没有意义的。在这种情况下，我应该遵循什么模式/好的做法?

这里有一个可复制的例子:https://codesandbox.io/s/vue-2-playground-vuex-drag-and-snap-to-tiles-un6984?file=/src/components/mainPage.vue。作为一个例子，我添加了myGreeting()方法(在mainPage.vue中)来显示我希望我的程序如何工作。我需要用目标drawGrid()方法替换此示例性方法。

Answer 1

使用$ref将解决您的问题:

<ZimModel ref="zimModel" />

在你的方法中:

triggerDrawing() {
clearTimeout(this.timer);
// this.timer = setTimeout(this.myGreeting, 5000);
this.$refs.zimModel.drawGrid();
}

Answer 2

虽然使用ref应该工作，但您应该考虑将该方法外包给.js并将该方法导入到您需要的文件中。当在多个组件中使用一个方法时，特别建议这样做。

在新文件中:

export function drawGrid() {
// Your code
}

你的组件

</template>
<script>
import { drawGrid } from 'relativePath' 
// using {} you can import a single function or few select to improve effectiveness
...

你可以直接调用这个函数。