シングルページアプリケーション(SPA)を作るときに使用するVue.jsで、親Componentから子Componentのmethodsを呼び出す方法を紹介します。
ChildComponent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template> <div></div> </template> <script> export default { methods: { childMethod() { console.log("aa"); } } } </script> |
ParenteComponent
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<template> <div> <ChildComponent ref="childComponent" /> </div> </template> <script> import ChildComponent from "./ChildComponent" export default { componentns: { ChildComponent }, methods: { executeChildComponent() { this.$refs.childComponent.childMethod(); } } } </script> |
このような形で、親Componentから、refsを使って、子Componentのメソッドを呼び出すことが可能です！
