【学習メモ】基礎から学ぶ Vue.js その3
- 第 5 章 コンポーネントで UI 部品を作る
コンポーネントの登録
<div id="app"><my-component></my-component></div>
Vue.component("my-component", { template: `<p>MyComponent</p>` }); var app = new Vue({ el: "#app" });
ローカルに登録 そのコンポーネントのスコープ内だけでの使用を制限する場合
var MyComponent = { template: `<p>MyComponent</p>` }; var app = new Vue({ el: "#app", components: { "my-component": MyComponent } });
親コンポーネント/子コンポーネント
<div id="app"><parent-component></parent-component></div>
Vue.component("child-component", { template: "<p>ChildComponent</p>" }); Vue.component("parent-component", { template: "<child-component></child-component>" }); var app = new Vue({ el: "#app" });
コンポーネント内でのdata
<div id="app"><data-component></data-component></div>
Vue.component("data-component", { template: "<p>{{ message }}</p>", data: function() { return { message: "DataComponent" }; } }); var app = new Vue({ el: "#app" });
コンポーネント間の通信(親 → 子)props down
<div id="app"><props-parent-component></props-parent-component></div>
Vue.component("props-child-component", { template: "<p>{{ val }}</p>", props: ["val"] }); Vue.component("props-parent-component", { template: '<props-child-component v-bind:val="message"></props-child-component>', data: function() { return { message: "propsParentComponent" }; } }); var app = new Vue({ el: "#app" });
コンポーネント間の通信(子 → 親)event up ($emit)
はスキップ