ログイン
問題7

コンポーネントにデータを渡そう! 基本編

アイコン画像

問題7:コンポーネントにデータを渡そう! 基本編

Vueコンポーネントにデータを渡してみよう。
'text="Hello NinjaCode!"'という形で'NinjaCode'コンポーネントにデータを渡し、
その値を'props'を用いて受け取ってほしい。

エディターのアイコンあらかじめエディタに書くコード

                <template>
  <div id="app">
    <ninjacode text="Hello NinjaCode!">
  </ninjacode></div>
</template>
¥Vue¥
              
                <template>
  <div>
    <h1>This is NinjaCode Component!</h1>
    <h2>{{ text }}</h2>
  </div>
</template>
¥Vue¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              --- App.vue
<script>
  import NinjaCode from "@/components/NinjaCode.vue"
  export default {
    components: {
      NinjaCode,
    }
  }
</script>
¥Vue¥
            
              --- NinjaCode.vue
<script>
  export default {
    props: ["text"]
  }
</script>
¥Vue¥
            

コメントのアイコン解説

コンポーネントを出力する際に新たに属性をつけることで、その値を'props'で受け取ることができる。
''とし、
’text’の値を'props'で受け取るという流れだ。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
Vueを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる