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

Vueのコンポーネント作成(基礎)

久しぶりにvueでコード書いたら、いろいろドンづまったのでメモ

箱型を作成

まずは最もシンプルなvueを作成します。
しばらくはjavascriptをHTMLと同じファイルに作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vueを学ぶ</title>
</head>

<body>
  <div id="app">
    {{perfume[0].name}}
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    perfume: [{name:"かしゆか"},{name:"あ〜ちゃん"},{name:"のっち"}]
  },
})
</script>
</body>
</html>

ブラウザで開くと、"かしゆか"だけ表示されます。

グローバル子コンポーネントを作成

次に子コンポーネントを作成します。(まずはグローバルから)
子コンポーネントは、以下のような形です。
"component-name"はケバブ方式で書きましょう(大文字を入れるとエラーを起こします)

Vue.component('component-name',{
  template:"",
  props:""
})

こちらが作成例です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vueを学ぶ</title>
</head>

<body>
  <div id="app">
    {{perfume[0].name}}

+    <perfume-member></perfume-member>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
+Vue.component('perfume-member',{
+  template:"<h1>コンポーネント</h1>"
+}
+)

new Vue({
  el: '#app',
  data: {
    perfume: [{name:"かしゆか"},{name:"あ〜ちゃん"},{name:"のっち"}]
  },
})
</script>
</body>
</html>

親コンポーネントからデータを渡す

親コンポーネントからデータを渡すには、
[html側] v-bindでデータの受け渡しを記述
v-bindは左に子コンポーネントでのデータ名、右側に親コンポーネントでのデータ名です。
<perfume-member v-bind:members="perfume"></perfume-member>

[js側] 子コンポーネントはpropsで受け取る。

props:{
  members:""
}

ここまでのコードです。
子コンポーネントのtemplateの部分は受け取ったデータを表示させるために
"<h1>{{member[1].name}}</h1>"と書き換えました

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vueを学ぶ</title>
</head>

<body>
  <div id="app">
    {{perfume[0].name}}

 +   <perfume-member v-bind:member="perfume"></perfume-member>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('perfume-member',{
+  template:"<h1>{{member[1].name}}</h1>",
+  props:{
+      members:"",
+    }
  }
)

new Vue({
  el: '#app',
  data: {
    perfume: [{name:"かしゆか"},{name:"あ〜ちゃん"},{name:"のっち"}]
  },
})
</script>
</body>
</html>

IMAGE

templateをx-templateに

現実のプログラムでは、templateを子コンポーネント内に直接記載することはまずなく、別ファイルに保管します。

[子コンポーネント] templateプロパティをtemplate:"#templateのid名"にします。
[x-template]テンプレートファイルを作成します。
(ちなみにxとは、標準化されてないMIMEタイプに慣習的に付けられる名前です)

こんな感じで作成しました。
注意!! x-templateの中身は<div>〜</div>などタグで囲む必要があります。
(囲んでなかった時には、以下のようなエラーメッセージが出ます。one root elementって要は一つのDOM要素って意味なんですね)
「[Vue warn]: Error compiling template:

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.」)

<script type="text/x-template" id="perfume-detail">
  <div>
    <h1>Perfumeのメンバー</h1>
    <ul>
      <li v-for="member in members">{{member.name}}</li>
    </ul>
  </div>
</script>

x-templateの記述は子コンポーネントより前にする必要があります。
(後にすると、x-templateがありませんとエラーがでます)

ここまでのコードはこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vueを学ぶ</title>
</head>

<body>
  <div id="app">
-    {{perfume[0].name}} //もう不要なので消します 
-
    <perfume-member v-bind:members="perfume"></perfume-member>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

+<script type="text/x-template" id="perfume-detail">
+    <h1>Perfumeのメンバー</h1>
+    <ul>
+      <li v-for="member in members">{{member.name}}</li>
+    </ul>
+</script>

<script>
Vue.component('perfume-member',{
  template:"#perfume-detail",
  props:{
      members:"",
    }
  }
)

new Vue({
  el: '#app',
  data: {
    perfume: [{name:"かしゆか"},{name:"あ〜ちゃん"},{name:"のっち"}]
  },
})
</script>

</body>
</html>

IMAGE

子コンポーネントをローカル化

[親コンポーネント] componentsプロパティを追加

components:{
  "コンポーネント名":コンポーネント関数名
}

[子コンポーネント ]Vue.componentを削除し、ローカル関数として定義する

const コンポーネント名={
 template:・・・
}

コードはこんな感じです
(scriptタグ内のみを抜粋)

<script>
-Vue.component("perfume-member",
+const perfume={
  template:"#perfume-detail",
  props:{
      members:"",
    },
  }

new Vue({
  el: '#app',
  data: {
    perfume: [{name:"かしゆか"},{name:"あ〜ちゃん"},{name:"のっち"}]
  },
+ components:{
+   "perfume-member":perfume,
+ }
})
</script>

子コンポーネントのデータ設定

親から受け取らず、子コンポーネント独自に定めるデータの記述方法です。
dataプロパティはfunctionでオブジェクトを返すようにします。
(アロー関数を使った書き方もできます)

  data:()=>{
    return {
      songs:[{title:"TOKYO GIRL"},{title:"Spring of Life"},{title:"FLASH"}]
      }
    }

コード全体です。
x-templateにはdataを表示させるようにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>vueを学ぶ</title>
</head>

<body>
  <div id="app">
    <perfume-member v-bind:members="perfume"></perfume-member>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/x-template" id="perfume-member">
  <div>
    <h1>Perfume</h1>
    <h2>メンバー</h2>
    <ul>
      <li v-for="member in members">{{member.name}}</li>
    </ul>
+    <h2></h2>
+    <ul>
+      <li v-for="song in songs">{{song.title}}</li>
+    </ul>
  </div>
</script>

<script>
const perfume={
  template:"#perfume-member",
  props:{
      members:"",
    },
+  data:()=>{
+    return {
+      songs:[{title:"TOKYO GIRL"},{title:"Spring of Life"},{title:"FLASH"}]
+      }
+    }
}

new Vue({
  el: '#app',
  data: {
    perfume: [{name:"かしゆか"},{name:"あ〜ちゃん"},{name:"のっち"}]
  },
  components:{
    "perfume-member":perfume,
  }
})
</script>

</body>
</html>

IMAGE

w5966qzh
32歳、未経験だった僕が趣味と教養のためにプログラミングを始めてます。 ノート代わりにQiitaを書いてます。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした