※Vue.js初心者です。あしからず。
こんな記事をゆっくり更新しています。
Vue.js初心者の僕がつまづいたところメモ
いつか誰かのお役にたてるようにがんばっていきます。

親コンポーネントから子コンポーネントにdataを渡す。

こんな構成でブログの新規投稿画面(Editor)を作成しました。
Githubっぽいマークダウンで入力して、RailsAPIにテキストを送信します。
それにあたり、コンポーネント分割の練習をしてみました。

実装物

結論:こんなコードになりました。

※コードは重要なところ以外は省略しています！

親コンポーネント

親コンポーネントEditorから子コンポーネントSubmitButtonを呼び出しています。

Editor.vue

<template>
  <!-- 省略 -->
  <SubmitButton :input="input"></SubmitButton>
</template>

<script>

import SubmitButton from "@components/parts/buttons/SubmitButton"

export default {
  name: "Editor"
  data () {
    return {
      input: ""
    }
  }
}

</script>

SubmitButton.vue


<template>
  <div id="submit" v-on:click="addFeed">Submit</div>
</template>

<script>
  import axios from "axios"

    export default {
      name: 'SubmitButton',
      props: ['input'],
      methods: {
        addFeed(e) {
          let _this = this;

          axios.post("http://localhost:3000/feeds",
            {
              feed: {
                text: this.input
              }
            }
          ).then(function(res) {
            _this.$router.push({ path: "/"})
          })
          e.preventDefault();
        }
      }
    }
</script>

ポイント

親側でv-bind, 子側でprops、そしたらthisでとれる。

Feed.vue

 <SubmitButton :input="input"></SubmitButton>

親コンポーネントで子コンポーネントを呼び出しているところで
v-bindして親コンポーネントとdataであるinputを渡してあげる。
(:input="input"の部分)

SubmitButton

export default {
  name: 'SubmitButton',
  props: ['input'],
  methods: {
    addFeed(e) {
      this.input //this.inputでアクセスできる！ﾜｯｼｮｲヽ(ﾟ∀ﾟ)ノﾜｯｼｮｲ

    }
  }
}

子コンポーネントでpropsを記述すると、
this.inputで親のdataにアクセスできるようになってる！

あとがき

データバインディングがどうとか、v-bindの挙動だとか細かい話しは正直わかっていません。また随時お勉強次第書き足していきます！

おまけ: 全コード(2コンポーネント分)

マークダウンエディタでブログ投稿画面を作成しています。

Vueのことはまだまだわかっていませんが、コンポーネント化という思想はとても好きです。JSが圧倒的に追いやすい。