テキストフィールドによりメッセージを表示

v-modelの使い方

カルーセルに表示する文字を入力できるようにします。
テキスト入力はTextFieldsのFilledにテキスト フィールド コンポーネントのサンプルがあります。ここからv-text-fieldの部分を持ってきて修正を加えます。v-model="message"に入力した文字がmessage変数に入ります。入れる場所は一つ目のシート。

            <v-col cols="12" md="4">
              <v-sheet height="150">
                  <v-text-field
                    v-model="message"
                    label="メッセージを入力してください"
                    filled>
                  </v-text-field>
              </v-sheet>
            </v-col>

scriptタグにはdataのところにmessageを追加します。

<script>
import CCalouse from './CarouselComp.vue'
  export default {
      components: {
          CCalouse,
      },
    data: () => ({ drawer: null,
    message:""}),
  }
</script>

カルーセルに表示させます。v-bind:moji="message"で子のpropsで宣言されたmojiと親のmessage変数が紐づきます。正確に言うとv-bind:によってmoji="○○○○"の○○○○にmessage変数の中身が入るようになります。またv-bindは省略可能で:moji="message"とも書けます。

        <v-container>
            <CCalouse v-bind:moji="message"></CCalouse>
            <v-row>

ここで紹介したv-modelの使い方を応用する場合v-bind、v-on、emit、親から子,子から親へのデータの受け渡しなどの知識が必要です。しかし最初からその辺の勉強をするとイメージがわかないため難しくなります。経験を積んで徐々に知識を増やしていけばいいと思います。何回勉強しても分からなくても何かをきっかけに分かるときが来ると思います。

propsとdata

データを使うときpropsかdataどちらかに宣言します。親から子にデータを渡す変数だけpropsで後はdataに書きます。

dataの表記

dataの表記方法は複数存在します。基本的にみんな同じですがBとDが無難な表記法です。

data: () => ({ drawer: null,message:""})

data: function() {
        return    { drawer: null, message:""}
    }

data: () => {
        return    { drawer: null, message:""}
    }

data: () => ({ drawer: null,message:""})

data() {
        return    { drawer: null, message:""}
    }

 data:{ drawer: null, message:""}

最後の表記をコンポーネントで使うとdata property in component must be a funcのエラーが出ます。
表記法の違いはmethodsやcreatedなどでもdataと同じようにあります。表記方法が違うだけで基本的には同じです。Javascriptの表記方法はECMAScriptという名前で毎年追加修正されています。新しくなっても古いものと互換性があるようです。ネットでJavascript系のコードを調べると表記法だけ違うのか機能が違うのかの判断が難しいです。これが学習しづらい原因だと思います。慣れるまでは、ECMASCriptというものがあるということを頭において動作がおかしいとき色々変えてみればいいと思います。