2021/08/28 (更新日: 2022/10/08)

Vue3のコンポーネントの基本をマスターしよう

こんにちはあっくんです。最近、車の運転の練習をしています。週一くらいで、兄の車で兄に教えていただいています。怖いけど、楽しいです。バックでの駐車は全くわからないです。41歳で、就活中、実家、未婚などもろもろポンコツですが、ここから積み上げてみます。今日はVueのコンポーネントの基本をやっていきましょう。

コンポーネントってなに？

コンポーネントは再利用可能な「部品」

コンポーネントは「名前のついた再利用可能なオブジェクト」です。コンポーネントは、一度定義すると、後はHTMLのタグを書くのと同じ感覚で利用できます。

コンポーネントの定義と利用

アプリケーション・オブジェクトの「componet」をつかいます。

アプリケーション.component(名前, {設定上情報})

第１引数がコンポーネントの名前で、第２引数にオブジェクトとしてまとめて用意します。

コンポーネントはHTMLタグ？

<コンポーネント />

コンポーネントのタグがあるかのように記述すればいいです。

helloコンポーネントを作ってみる

「Hello!」とメッセージを表示するだけのコンポーネント「hello」を作っていきましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>My first Vue app</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
    <div id="app" class="container">
      <p>{{message}}</p>
      <hello />
    </div>
    <script>
      const appdata = {
        data() {
          return {
            message: "*コンポーネントを表示する",
          };
        },
      };

      let app = Vue.createApp(appdata);

      app.component("hello", {
        template: '<p class="alert alert-primary">Hello!</p>',
      });

      app.mount("#app");
    </script>
  </body>
</html>
Code language: HTML, XML (xml)

↑「Hello」とアラートが表示されます。これがhelloコンポーネントです。

コンポーネントの組み込み方

<h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
<div id="app" class="container">
  <p>{{message}}</p>
  <hello />
</div>
Code language: HTML, XML (xml)

<hello/>がhelloコンポーネントを使っているところです。

app.component("hello", {
        template: '<p class="alert alert-primary">Hello!</p>',
      })
Code language: CSS (css)

componentメソッドを呼び出して、コンポーネントを作成しています。第１引数の名前にhelloを、第２引数の設定情報オブジェクトには、「template」という項目用意しています。このtemplateに設定した内容がコンポーネントとして表示されます。ここでは、

と置き換わって表示されます。

・変数をコンポーネントに渡す

data(){ return { 変数 } }

変数などの値はコンポーネントの「data」メソッドに用意します。

メッセージを指定する

<!DOCTYPE html>
<html>
  <head>
    <title>My first Vue app</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
    <div id="app" class="container">
      <p>{{message}}</p>
      <hello />
    </div>
    <script>
      const appdata = {
        data() {
          return {
            message: "*コンポーネントを表示する",
          };
        },
      };

      let app = Vue.createApp(appdata);

      app.component("hello", {
        data() {
          return {
            message: "これは新しいメッセージです。",
          };
        },
        template: '<p class="alert alert-primary">{{message}}</p>',
      });

      app.mount("#app");
    </script>
  </body>
</html>
Code language: HTML, XML (xml)

↑Webブラウザで表示すると、messageで設定したメッセージが表示されます。

属性の利用

コンポーネントの表示するメッセージなどの情報を属性として用意できます。「props」というプロパティとして用意しておきます。

props: [ 名前1, 名前2, ………]

propsは、配列を値にもつプロパティです。配列には、タグに用意される属性の名前をまとめておきます。

<!DOCTYPE html>
<html>
  <head>
    <title>My first Vue app</title>
    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <!-- JavaScript Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
      crossorigin="anonymous"
    ></script>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <h1 class="bg-secondary text-white display-4 px-3">Vue3</h1>
    <div id="app" class="container">
      <p>{{message}}</p>
      <div><hello name="Taro" /></div>
      <div><hello name="Hanako" /></div>
    </div>

    <script>
      const appdata = {
        data() {
          return {
            message: "*コンポーネントを表示する",
          };
        },
      };

      let app = Vue.createApp(appdata);

      app.component("hello", {
        props: ["name"],
        data() {
          return {
            message: "これは新しいメッセージです。",
          };
        },
        template: ' <p class="alert alert-primary">Hello, {{name}}!</p>',
      });

      app.mount("#app");
    </script>
  </body>
</html>
Code language: HTML, XML (xml)