問題
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'で受け取るという流れだ。