Vue.jsで親から子に渡すパラメータについての細かい書き方についてのメモ

v-bindの書き方について混乱していた点

v-bindの基本的な書き方は、

v-bind:<子側のプロパティ>="<親側で渡したいパラメータ>"

だと思う。

混乱したのは以下の２点だと思う。

• v-bind や :（コロン） がない時があるが、その違いは？
• <親側で渡したいパラメータ> に入れるものについて、 '（シングルクオート） で囲う時とそうでない時の違いは？

まだ完璧に全体像をつかめたわけではないのだが、今回試してみて違いがわかってきたので、ここにまとめておく。 さらに追加情報があったら適宜書き足していくつもり。

親から子に渡すパラメータが data 内で管理している変数の時

【親要素のHTML内のパラメータ渡す書き方】

子要素名(v-bind:<子要素のプロパティ名>="<親要素のdata内で管理している変数名>")

です。

そして、 v-bind: と書くのと、省略して :（コロンのみ） で書くのは同じ意味です。

親から子に渡すパラメータが定数の時

【親要素のHTML内のパラメータ渡す書き方】①

子要素名(v-bind:<子要素のプロパティ名>="'<渡したい定数やテキストベタ書き>'")

ただし、以下の書き方でも通りました。

【親要素のHTML内のパラメータ渡す書き方】②

子要素名(<子要素のプロパティ名>="<渡したい定数やテキストベタ書き>")

定数やテキストベタ書きを渡すのであれば、 v-bind: と書かなくてもいいってことですね。 ただし、v-bind: をつけて渡す場合は、システムが data 内で変数を探してしまうことを避けるために、定数であることを明確に伝えるべく、 '（シングルクオート） で囲む、ということだと思います。

複数つなげる時は、カンマの要不要とかバリエーションあるかと思いましたが、関係ありませんでした。

例１

A(
  :parameter1="data1",
  :parameter2="data2",
  :parameter3="data3"
)

例２

A(
  parameter1="'text1'"
  parameter2="'text2'"
  parameter3="'text3'"
)

上の例１と例２は同様に通りました。

細かいことで時間取られた・・・。整理できたよかったとする。