[Vue] コンポーネント

vue公式のチュートリアル。
コンポーネントのチュートリアル。

チュートリアルのコード

ChildComp.js

export default {
  template: `
  <h2>A Child Component!</h2>
  `
}

index.html

<script type="module">
import { createApp } from 'vue'
import ChildComp from './ChildComp.js'

createApp({
  components: {
    ChildComp
  }
}).mount('#app')
</script>

<div id="app">
  <child-comp></child-comp>
</div>

stackblitz 上で、<script setup>で書いたコード

このチュートリアルだと、
<script type="module">
の形式で書かれているので、
<script setup>
の形式に書き直す。

使っている stackblitz 上では、Vueをコンパイルできるので、<script setup>で書く。

HelloWorld.vueから、ChildComp.vueコンポーネントとしてインポートして使う。
HelloWorld.vueが親コンポーネントで、ChildComp.vueが、子コンポーネント。

ChildComp.vue

<template>
  <h2>A Child Component!</h2>
</template>

HelloWorld.vue

<script setup>
import ChildComp from './ChildComp.vue';
</script>

<template>
  <ChildComp></ChildComp>
</template>

<style></style>

stackblitz 埋め込み。