こんにちは、shinoです。毎日ボチボチプログラミングをしながら生活しています。その中での技術・エラーなどの紹介をしています。
今回は、nuxtにてv-bindを導入する必要があったので紹介していきます。nuxtを初めて使う方向けに書いてみます。私も最近少し使っただけなので調べながらやっている状態です。とても単純なものだったので紹介しておきます。
v-bindとは
vue形式の記法にて、親のコンポーネントから子コンポーネントに渡す際に記載します。これは、親のコンポートントに設定をします。タブ内にoptionとして設定します。後で、詳しい書き方を載せています。
propsとは
これは、子コンポートントに設定するものです。これを記載することで受け取りを設定している形です。これは、scriptタグに設定するのが基本かと思います。こちらも詳しいものを後で、載せます。
動的な継承
実際にコードにて紹介してみます。messageという名前にてデータを送っておきます。inputにて入力されたものが子コンポーネントに渡されるようにします。v-modelを使うことでdataないの値と同じになります。子コンポーネントして、messageという名前で設定しておきます。
親コンポーネント（index.vue）
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <message v-bind:message="test"></message> <input v-model=“test”> </div> export default { data() { return { test: '' } }, } |
子コンポーネント（message.vue）
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <p>{{ message }}です。</p> </div> </template> <script> export default { props: ['message'] } </script> |
scriptタグ内にてpropsを設定しています。これにて受け取りができます。
これにて動作ができるのでinputに入力にしてみて確認して下さい。
省略記法
省略法としては、v-bindは:valueに変更できます。具体的には、:messageとすることができます。一応省略法を書いてみると以下のようになります。
親コンポーネント（index.vue）
|
1 2 3 4 5 6 7 8 9 10 11 |
<div> <message :message="test"></message> <input v-model=“test”> </div> export default { data() { return { test: '' } }, } |
子コンポーネント（message.vue）
|
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <p>{{ message }}です。</p> </div> </template> <script> export default { props: ['message'] } </script> |
最後に
お疲れ様です。Nuxtの動的な継承はは理解できたでしょうか？
他にもエラー情報等も掲載してあるので読んでみて下さい。
解決できなければ、NuxtJS公式を確認してみるのもいいと思います。
ひと休憩の際におすすめ記事は「【Nuxt.js】ローカル環境にてcorsの設定方法」です。時間があれば読んでみて下さい。
コメント