export defaultとは？

はじめに

Vue.jsで辞書アプリを作ろうと思い、勉強しております。
Vue componentのexport defaultについて、わからなかったので、調べてみました。

そもそもComponentとは

公式サイトでは「コンポーネントによって UI を独立した再利用可能なピースに分割し、それぞれのピースを切り離して考えることができるようになります。」と書かれています。
参照：https://ja.vuejs.org/guide/essentials/component-basics

Componentは、templateタグ、scriptタグ、styleタグの三つで構成されています、WEBページで再利用したい見た目や機能が記載されている。
つまり、ComponentとはWEBページに表示したい要素、１つの部品として、管理し、使いたいときに呼び出して、使用できる機能のようです。

使うには、

Scriptタグの中の、export defaultにcomponentを呼び出すための名前をnameに登録する。

<script>
export default {
  name: 'HelloWorld'
};
</script>

使う側（は親となる）のcomponentで、使いたい他のcomponentをimportし、
export defaultで使うことを記載する。
そしてtemplateにcomponent名を記載すると、html上に表示できます。

<template>
<HelloWorld />
</template>
<script>
import HelloWorld from './HelloWorld.vue'; // HelloWorldコンポーネントのインポート

export default {
  name: 'App',
  components: {
    HelloWorld // 子コンポーネントとして登録
  }
};
</script>

実際の例として

Vue.jsのプロジェクト（Default ([Vue 3] babel, eslintの場合)）を立ち上げると、
srcフォルダには、２つのcomponentが生成されている、HelloWorld.vueとApp.vueだ。

localhostでページを開くと下記のようになる

実際のコードは長いので省略しますが、
HelloWorldのtemplateにはmsgという変数やその他pタグなどの要素があります。

#HelloWorld.vueのコード
<template>
<h1>{{ msg }}</h1>
<p></p>
<ul></ul>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

App.vueでHelloWorld.vueをimportし、
template内にHelloworld componentを記載し、同時にmsg変数に値を入力することで、
表示内容を変更しています。

#App.vueのコード
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

構成としては下記図になります。

自己紹介

@yamann と言います。プログラミングに興味があり、スクールに通い、Laravelを使ったWEB開発を学習しました。最近はLLMに興味があり、色々調べては、試しています。その備忘録として記事を書いております。