子コンポーネントへのデータの受け渡し [Vue.js]

子コンポーネントへのデータの受け渡し

子コンポーネントのプロパティにバインドする

プロパティを定義する

<!--
  Child.vue
-->

<script>
export default {
  props: ['giveMe']
}
</script>

親テンプレートでバインディング

<!--
  App.vue
-->

<template>
  <child v-bind:give-me="something"></child>
</template>

<script>
import Child from './Child.vue'

export default {
  components: Child
}
</script>

インスタンスの生成時にデータの初期値を与える

// entry.js

import App from './components/App.vue'

new Vue({
  el: '#app',
  data: {
    something: 'Money!'
  },
  components: {
    App
  }
}

参考：

プロパティを使用した子コンポーネントへのデータの受け渡し – コンポーネントの基本 — Vue.js [公式]

propsで子コンポーネントにデータが渡らないのはHTMLの命名規則が原因だった – Qiita

Vue.js2.x系で親から子コンポーネントにデータを渡す方法 | Black Everyday Company

Vue.jsでcomponentsに親からデータがわたらない時に確認する2つのこと – 俺、サービス売って家買うんだ

プロパティ

参考：

プロパティ — Vue.js [公式]

v-bind

参考：

v-bind – API — Vue.js [公式]