eijiコメントはこの投稿ではオフになっています。VueコンポーネントVue.jsでは、名前付きの再利用可能なVueインスタンスとして、Vueコンポーネントという仕組みが用意されており、HTMLの要素やスタイル、状態、挙動などを使いまわせる部品としてまとめて定義できる。Vue.component()という関数が用意されており、第一引数にVueインスタンス内に存在する要素名(=コンポーネント名)を、第二引数にオプションを与える。caseに統一しておくことが望ましい。'#app'})</script>Vueコンポーネントで指定できるオプションは、以下の通り。親要素から子要素へのデータ受け渡しコンポーネントは、グローバルのVue.jsに対して定義するグローバルコンポーネントと、あるVueインスタンスの中のみで使用できるローカルコンポーネントが存在する。ローカルコンポーネントは、対象のVueインスタンス内で定義する。<li>item</li></script>renderオプションコンポーネント内でコードを用いる場合は、renderオプションを使用する。単一ファイルコンポーネント.vue拡張子の単一ファイル上でコンポーネントを実装することができる。これらのファイルを利用するときは、Webpackなどによるプリコンパイルが必要となる。Vueインスタンス内のcomponentsオプションにて、利用するコンポーネントを指定する必要がある。下記のように、単一ファイルコンポーネント内でも他のコンポーネントをローカル登録することが可能である。}}コンポーネントデータコンポーネント内のdataオブジェクトにそのままデータを記載すると、コンポーネントの全てのインスタンスでこれらのデータが共有されてしまう。これを防ぐために、コンポーネントでdataオブジェクトを使用する際には、関数を用いて値を返却する実装とする。コンポーネント間の通信Vue.jsでは、各コンポーネント内で独自のスコープを持つので、基本的にはコンポーネントを跨いだデータの受け渡しはできないが、親コンポーネントと子コンポーネントの間では、データの受け渡しが可能である。親から子へはpropsオプションを用いて、子から親にはイベントを用いてデータを受け渡す。propsオプションは子コンポーネント内に記載し、受け渡されるデータの属性名や型などを指定することができる。親コンポーネントでは、v-bindを用いて受け渡す値を指定する。case子コンポーネントから親コンポーネントへの通信は、カスタムイベントを使用する。(1)アーカイブ2020年2月2020年1月2019年12月2019年11月2019年10月2019年9月2019年8月2019年4月2019年3月2019年2月2019年1月2018年12月2018年11月2018年4月2017年4月2016年12月2016年11月2016年10月2016年8月2016年5月2016年4月2016年3月2016年1月2015年12月2015年11月2015年10月2015年9月2015年5月2015年4月2015年2月2012年5月2012年4月2011年6月メタ情報ログイン投稿フィードコメントフィードWordPress.org。