4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

プロパティとデータの違いについて

Posted at

Vue.jsを扱っていて、プロパティとデータの違いがよくわからなかったのでまとめました。

プロパティ(props)

  • プロパティはVueコンポーネントで使われるもの
  • 親から子にデータを渡したいときに使う

子コンポーネントでは、propsを持ってその中に値を受け渡すオブジェクトを格納する
スクリーンショット 2020-02-08 14.36.44.png

親コンポーネントでは、変更する情報の値を入力する

スクリーンショット 2020-02-08 14.37.36.png

データ(data)

  • dataは、あくまでtemplate(HTML)から呼び出すことのできる値を集合させたオブジェクト
    先ほどと同じ状況を作ろうとすると、子コンポーネントではdata()に書き換える
    return にする必要がある)
スクリーンショット 2020-02-08 23.34.17.png

親コンポーネントは値を渡すことなく、ただ表示するだけ
スクリーンショット 2020-02-08 23.34.50.png

これで、同じ表示をすることができる
スクリーンショット 2020-02-08 23.36.49.png

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?