vue.js コンポーネントの値の使い方がわからない

html
1<div id="components-demo2">
2  <custom-input v-model="value"></custom-input>
3  <custom-input v-model="value2"></custom-input>
4</div>

script
1Vue.component('custom-input', {
2  props: ['value'],
3  template: `
4  <table border="1">
5    <tr>
6      <td>
7          <a> {{ message }}</a>
8      </td>
9      <td>
10        <input type="text" class="money" id="deposit"
11          v-bind:value="value"
12          v-on:input="$emit('input', $event.target.value)"
13          number disabled />
14        <a>円</a>
15      </td>
16    </tr>
17  </table>
18  `
19})
20
21  var value =   new Vue({
22    el: '#components-demo2',
23    data: {
24      value:3,
25      value2:1
26    }
27  })
28

<a> {{ message }}</a>
messageに値を入れたいのですがどのようにすると良いでしょうか？

現在できている画面

左の枠に値を入れたい

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

回答1件

component内でdataを定義するなら

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="components-demo2">
10  <custom-input v-model="value"></custom-input>
11  <custom-input v-model="value2"></custom-input>
12</div>
13<script>
14Vue.component('custom-input', {
15  props: ['value'],
16  data: function() {
17    return({
18      message: 'メッセージ'
19    });
20  },
21  template: `
22  <table border="1">
23    <tr>
24      <td>
25          <a> {{ message }}</a>
26      </td>
27      <td>
28        <input type="text" class="money" id="deposit"
29          v-bind:value="value"
30          v-on:input="$emit('input', $event.target.value)"
31          number disabled />
32        <a>円</a>
33      </td>
34    </tr>
35  </table>
36  `
37})
38
39  var value =   new Vue({
40    el: '#components-demo2',
41    data: {
42      value:3,
43      value2:1
44    }
45  })
46</script>
47</body>
48</html>

propsで渡したいならば

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8" />
5  <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
6  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
7</head>
8<body>
9<div id="components-demo2">
10  <custom-input v-model="value" message="メッセージ"></custom-input>
11  <custom-input v-model="value2" message="メッセージ"></custom-input>
12</div>
13<script>
14Vue.component('custom-input', {
15  props: ['value', 'message'],
16  template: `
17  <table border="1">
18    <tr>
19      <td>
20          <a> {{ message }}</a>
21      </td>
22      <td>
23        <input type="text" class="money" id="deposit"
24          v-bind:value="value"
25          v-on:input="$emit('input', $event.target.value)"
26          number disabled />
27        <a>円</a>
28      </td>
29    </tr>
30  </table>
31  `
32})
33
34  var value =   new Vue({
35    el: '#components-demo2',
36    data: {
37      value:3,
38      value2:1
39    }
40  })
41</script>
42</body>
43</html>