Vus.jsのコンポーネント内でのdataの利用方法

Vus.js　にて、コンポーネントとのデータの利用方法なのですが、
コードの様に、コンポーネント側へデータを渡す時に、
vm.num1
vm.num2
という方法で、出来たのですが、これで良いのでしょうか？

合計:{{sum}}　に結果が戻ってくるのですが、

この　vm 　を使用する方法

で良いのでしょうか？

別の良い方法がございますでしょうか？

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テスト</title>
</head>
<body>
    <div id="app">
        <sample v-bind:title="title"></sample>
        <div>合計:{{sum}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('sample', {
            template: '<button v-on:click="btn">ボタン: {{ title }}</button>',
            props: ['title'],
            methods: {
                btn: function () {
                    vm.sum = vm.num1+vm.num2;
                }
            }
        });
        var vm = new Vue({
            el: "#app",
            data: {
                title:"計算",
                num1:3,
                num2:6,
                sum:""
            }
        })
    </script>
</body>
</html>

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

回答1件

ベストアンサー

ご質問拝見いたしました。

コンポーネントの利用についてですが、汎用的に利用することが目的なので、
上記のソースですとsampleコンポーネントは#appの計算にしか利用することができないため、
コンポーネントの機能が利用できていないように感じます。

titleについては、sampleタグで動的に設定できるようになっているため、
ボタン押下についても使いまわせる実装にされた方が良いと思います。

そのため、emitを使用してボタン押下時の処理を設定できるようにするのが望ましいと考えます。

上記ソースを変更させていただくと以下のようなソースがよろしいかと思います。

HTML
1    <div id="app">
2        ↓ v-onを利用しコンポーネントにボタン押下時にしたい処理を渡します。
3        <sample v-bind:title="title" v-on:on-click="calculation"></sample> 
4        <div>合計: {{ sum }}</div>
5    </div>
6    <script>
7        Vue.component('sample', {
8            template: `<button v-on:click="btn">ボタン: {{ title }}</button>`,
9            props: ['title'],
10            methods: {
11                btn: function () {
12                    this.$emit('on-click') // emitでon-clickで渡された処理を呼び出します。
13                }
14            }
15        });
16        var vm = new Vue({
17            el: "#app",
18            data: {
19                title:"計算",
20                num1:3,
21                num2:6,
22                sum:""
23            },
24            methods: {
25              calculation: function() { // v-onに渡すように計算するメソッドを作成します。
26                this.sum = this.num1 + this.num2;
27              }
28            }
29        })
30    </script>

上記の記述でsampleコンポーネントを汎用的に利用することが出来ると思います。
ご参考になれば幸いです。

追記

コメントでいただいたコンポーネントに値を渡してコンポーネント内のメソッドで処理をする場合以下のようなソースを考えてみました。
コンポーネントに値を渡す上で、sumの表示をコンポーネントに含めています。

html
1    <div id="app">
2        <sample v-bind:title="title" v-bind:num1="num1" v-bind:num2="num2"></sample>
3　　　　　↑ v-bindで値を渡す(今回はそれぞれ渡していますが、v-bind=オブジェクトで渡すこともできます。)
4    </div>
5    <script>
6        Vue.component('sample', {
7            template: '<div><button v-on:click="btn">ボタン: {{ title }}</button><div>合計:{{ sum }}</div></div>', // sumの表示を移動しています。
8            props: ['title', 'num1', 'num2'], // propsに num1とnum2を追加しました。
9            data: function() {
10                return { sum: '' } // sumをコンポーネントに移動
11            },
12            methods: {
13                btn: function () {
14                    this.sum = this.num1 + this.num2; // コンポーネント内で値を計算
15                }
16            }
17        });
18        var vm = new Vue({
19            el: "#app",
20            data: {
21                title:"計算",
22                num1:3,
23                num2:6
24            }
25        })
26    </script>

ご参考になれば幸いです。

投稿2021/01/27 09:48

編集2021/01/27 15:06

Twoshi

総合スコア354

miya38

2021/01/27 12:52

ありがとうございます。 $emit　は、まだ手付かずなので、勉強させていただきます。ことの発端は、コンポーネント側　に、methods を内包して行ってみたい。と思いまして、その場合に、コンポーネント側methodsへ、どの方法でデータを、コンポーネント側に渡せるのか？という部分に、疑問がございまして。 vm. 　の様な　記述自体は、問題ありますでしょうか？

Twoshi

2021/01/27 15:00

ご確認いただきありがとうございます！ vm. のような記述自体に問題はあるかという点ですが、1ファイル内での記述であれば動作としては問題はないと思います。ただ、コンポーネントは複数の画面で使い回すことがほとんどかと思います。そのため、今後問題は出てくると考えられます。また、vm.という記述は、コンポーネントに値を渡しているのではなく、コンポーネントがvmを参照しに行っているに過ぎません。値を渡すということであれば、propsを利用します。回答に追記いたしますので、ご確認いただければと思います。

miya38

2021/01/28 01:41

ありがとうございました。複数の　bind　、props で取得可能なのなのですね。大変助かりました。

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