コンポーネント
基本
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}
},
})