Vue
Googleでログイン
問題7：コンポーネントにデータを渡そう！ 基本編
Vueコンポーネントにデータを渡してみよう。
'text="Hello NinjaCode!"'という形で'NinjaCode'コンポーネントにデータを渡し、
その値を'props'を用いて受け取ってほしい。
'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¥
完了にする！
活動記録をTweetする
'
’text’の値を'props'で受け取るという流れだ。