【学習メモ】基礎から学ぶ 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) はスキップ