Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

コンポーネント

基本

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}
  },
})
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away