Vue.js でコンポーネントのメソッドをインスタンスから呼ぶ方法

表題の通り、コンポーネントで定義してあるメソッドをインスタンスから呼びたいのですが、呼び出しのところでエラーになってしまいます。
何か方法はありますでしょうか？

よろしくお願いいたします。

HTML
1<body>
2    <div id="app">
3        <my-component></my-component>
4        <div v-on:click="start()">start</div>
5    </div>
6
7    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8    <script>
9
10        var myComponent = Vue.extend({
11            template:`<section>aaa</section>`,
12            methods:{
13                test(){
14                },
15            },
16
17        });
18
19        var vue = new Vue({
20            el:'#app',
21            components:{
22                'my-component':myComponent
23            },
24            methods:{
25                start(){
26                    console.log("start");
27                    myComponent.test(); //エラーになる。。。
28                },
29            }
30        });
31
32
33    </script>
34</body>

行動規範の内容に同意します

回答1件

ベストアンサー

設計に関してはとりあえずきにしないことにして

html
1<body>
2  <div id="app">
3      <my-component ref="mycon"></my-component>
4      <div v-on:click="start()">start</div>
5  </div>
6
7  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
8  <script>
9
10      var myComponent = Vue.extend({
11          template:`<section>aaa</section>`,
12          methods:{
13              test(){
14                alert('よばれました');
15              },
16          },
17
18      });
19
20      var vue = new Vue({
21          el:'#app',
22          components:{
23              'my-component':myComponent
24          },
25          methods:{
26              start(){
27                  console.log("start");
28                  this.$refs.mycon.test();
29              },
30          }
31      });
32
33
34  </script>
35</body>