問題

7
Vue.js

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

Vue.jsの問題に挑戦しよう!

問題

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

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¥
                

期待する画面

解答の画像

解答と解説(コンポーネントにデータを渡そう! 基本編)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

コンポーネントを出力する際に新たに属性をつけることで、その値を'props'で受け取ることができる。
''とし、
’text’の値を'props'で受け取るという流れだ。

さらにスキルアップしたい方は公式LINEから「Vue.js」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら