【Vue.js】コンポーネントの書き方

コンポーネント

基本

componentの引数は、
第一引数にテンプレート名、
第二引数にtemplate(HTML)
を指定する

// その場でHTMLを生成する場合
Vue.component("template名", {template: "挿入されるHTML構造"})
components: "template名", {template: "挿入されるHTML構造"}

// vueファイル(template)を読み込んで使う場合
// 読み込んだファイルがtemplateに相当するので、templateオプションは必要ない
Vue.component("別に指定したいtemplate名", "読み込んだもの")
compoonents: "別に指定したいtemplate名", "読み込んだもの"

グローバルコンポーネントとして設定する

その場でHTMLを生成する場合

Vue.component("Home", {template: "<h1>home</h1>"})

vueファイル(template)を読み込んで使う場合

import Home from "./Home.vue"
// import名をtemplate名として使う場合
Vue.component(Home)
// template名を上書きして使う場合
Vue.component("home-template", Home)

ローカルコンポーネントとして設定する

その場でHTMLを生成する場合

new Vue({
    el : "#app",
    components : { Home : {template : "<h1>home</h1>"}
  }
})

vueファイル(template)を読み込んで使う場合

import Home from "./Home.vue"
new Vue({
    el : "#app",
    // import名をtemplate名として使う場合
    components ; {Home}
    // template名を上書きして使う場合
    components ; {"home-template", Home}
  },
})