コンポーネントのpropsで静的/動的な値の受け渡しとその書き方の違い
button-mark.vue
<template> // {{ name }}を追加して表示させる
<button v-on:click="mark = mark + \'!\'">Hello {{ name }}{{ mark }}</button>
</template>
<script>
export default{
props: ['name'], // propsで’name’を列挙
data: function () {
return {
mark: '!'
}
},
}
</script>
続いて親コンポーネント
main.vue
<template>
<p>
<input v-model = "nameParent"> // inputからの動的なプロパティnameParent
</p>
<button-mark name="John"></button-mark> // 静的な文字列を渡す場合
<button-mark :name="nameParent"></button-mark> // 動的なプロパティを渡す場合
</template>
<script>
import button-mark from './button-mark.Vue'
export default{
components: {
button-mark
}, // inputで用いるプロパティを宣言
data: {
nameParent: ''
},
}
</script>
ただし、子コンポーネントでpropsに型などをつける場合は、渡すpropsが静的/動的にかかわらず、:valueなど動的なプロパティの渡し方の記述をする。これにハマった。
参考文献
