【Vue】親→子 - ハッピーメモメモ

①直接かいて渡す

App.vue

・子で使う名前＝”送りたいデータ”

<template>
  <HelloWorld 
    test="tttt" />
</template>

HelloWorld.vue

・propsでデータを受け取る

<template>
  <div>
    {{ test }}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props:{
    test: String,
  },
};
</script>

②v-bindで渡す

App.vue

・v-bind:子で使う名前=""親で使ってる名前"

<template>
  <div id="app">
    <Tweet
      v-for="Tweet in AllTweet"
      v-bind:TweetObj="Tweet"
      v-bind:key="Tweet.tweet_id"
    />
  </div>
</template>

<script>
import Tweet from "./components/Tweet.vue";

export default {
  name: "App",
  components: {
    Tweet,
  },

  data() {
    return {
      AllTweet: Array.of({
        tweet_id: 0,
        tweet_body: "はじめてのツイート",
        tweet_user: {
          user_id: "111",
          user_name: "first",
        },
      }),

HelloWorld.vue

<template>
  <div >
    {{ TweetObj }}
 </div>
</template>

<script>
export default {
  name: "Tweet",
  props: {
    TweetObj: Object,
  },
};
</script>

③親のローカルにあるデータを渡す

App.vue

・const dataで値を入れる場所をつくる

・data.〇〇に対して、ローカルの値を代入する

<template>
  <HelloWorld 
    v-bind:book_data="bookData" />
</template>

<script>
import { reactive } from "vue";
import HelloWorld from "./components/HelloWorld";

// "axios"のライブラリのインポート
import axios from "axios";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    const data = reactive({
      message: "Hello Vue!!!!!!!!",
      bookData:'',
    });
    const url = "http://127.0.0.1:8000/api/books";
    const getAPI = async () => {
      const result = await axios.get(url);
      data.bookData = result;
      console.log(result);
    };

    getAPI();

    return {
      data,
      getAPI,
    };
  },
};
</script>