vue.jsでテンプレート内からのクリックでメソッドを呼び出したい

下記のように記述すると
ロード時にエラーになり、ボタン２からは「testfunc」を呼び出せますがボタン1からは呼び出せません。
やりたいことはvueオブジェクトに設定したコンポーネントのテンプレート内からクリックをトリガーに「testfunc」を呼び出すことなのですが。
どう書いたらうまくいけるでしょうか。

js
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4
5    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>
7
8    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
9    <title>さんぷる</title>
10</head>
11
12<body>
13
14
15<section class="container" id="app">
16
17    <btn1></btn1>
18    <input type="button" @click="testfunc" value="ボタン2">
19
20</section>
21
22<script type="text/javascript">
23
24
25var app = new Vue({
26  el: "#app",
27  methods: {
28        testfunc: function() {
29            alert("ok");
30        }
31    },
32  components: {'btn1':{template: '<input type="button" @click="testfunc" value="ボタン1">'}}
33});
34
35</script>
36
37
38</body>
39</html>

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

回答1件

ベストアンサー

私もVue初心者ですが手順としては
1.親側(html記述時点)でfunctionを名前付きで登録
2.子側(コンポーネント内)で名前を呼び出す
という流れになると思っています。

親側

html
1    <btn1 @test="testfunc"></btn1>

こういう感じで@testにtestfuncを指定し
コンポーネント側で$emitしてtestを呼び出すと解釈してます。

javascript
1    components: {
2        'btn1':{
3            template: '<input type="button" @click="this.$emit("test")" value="ボタン1">'
4        }
5    }

分解するとこんな感じだったかなと。未検証ですが大体あっているかと…

javascript
1    components: {
2        'btn1':{
3            template: '<input type="button" @click="clickcall" value="ボタン1">',
4            methods:{
5                clickcall:function(){
6                    this.$emit('test');
7                }
8            }
9        }
10    }

投稿2018/02/13 02:55

sousuke

総合スコア3828

redara

2018/02/13 03:21

回答ありがとうございます！回答いただいた内容でうまく動かすことができました。ただ、自分もvue初学者なのですが、なんというかあまり直感的に感じません。（vue.jsの書き方自体が）こういうものなのでしょうかそもそもやろうとしてることが悪いのでしょうか。子コンポ―ネント上のクリックをトリガーにして親メソッドを呼び出すというのはありがちなことだと思うのですが、もっと違う切り口で実装するべきなんでしょうか。たとえばcomponent初期化時ではなく後からクリックイベントを付与させるような手順を取るとか

sousuke

2018/02/13 04:15

とりあえずでも動いてよかったです。私見ですがまずコンポーネントは「再利用可能なもの」というコンセプトで実装されています。なのでbtn1というタグは使いまわす前提ということなんですよね。使いまわしたときは当然各々btn1のクリック時にやりたいことはその都度違うはずなので例で言えば@testに各々のmethodsを当てはめることになります。コンポーネントとイベントロジックを一対一にしてしまうと「再利用が不可になる」のでこのような形なのだと思います。大雑把にいうとコンポーネントはあくまで「template」であってロジックや内容は「知ったことではない」ということですね。

redara

2018/02/13 04:45

なるほど。そう考えれば納得がいきます。呼び出すメソッドについては子コンポーネントの中に記述してできるだけ子コンポーネント内で完結させるようにしたいと思います。ありがとうございました

sousuke

2018/02/13 05:49 編集

これは私の解釈なのでリファレンスをやはりみるのが一番だと思います。お互い頑張りましょうｂ

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