Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Quest_love33(@ Ppl)

【vue3】component基礎

Last updated at Posted at 2021-12-12

コンポーネントの基本（グローバルコンポーネント）

  • 基本的なcomponentの定義
    • グローバルコンポーネントとローカルコンポーネントの2種類存在する。
      • 以下に示しているのはグローバルコンポーネント
      • グローバルコンポーネントはアプリケーション内のどのコンポーネントのテンプレートでも使う事ができる。
// Vue アプリケーションを作成します
const app = Vue.createApp({})

//app変数に格納されたvueインスタンスに直接コンポーネントを紐づけている。
// グローバルな button-counter というコンポーネントを定義します
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

//vueの仮想DOMにマウントする。
app.mount('#components-demo')
  • html側ではcomponentの名前定義でマウントする。

<div id="components-demo">
  <button-counter></button-counter> 
  <button-counter></button-counter> //コンポーネントは再利用が可能。
  <button-counter></button-counter> //それぞれ独立したコンポーネントインスタンスになる。
</div>

See the Pen Component basics: reusing components by Vue (@Vue) on CodePen.

コンポーネントのローカル登録

グローバル登録のデメリット

  • 全てのコンポーネントをグローバル登録すると、使用していないコンポーネントも最終ビルドに含まれ、余分なjavascriptを増やしまう。

ローカル登録手順

  1. プレーンjavascriptとしてコンポーネントを定義
const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}
  1. components オプション内に使用したいコンポーネントをkey value形式で定義します。
const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

ローカル登録されたコンポーネントはサブコンポーネントでは利用できない。

ComponentA を ComponentB 内で使用可能にしたいときは、以下のように使用する必要があります.

const ComponentA = {
  /* ... */
}

const ComponentB = {
  components: {
    'component-a': ComponentA
  }
  // ...
}

Babel と Webpack のようなものを用いて ES2015 モジュールを利用している場合は、このようになります.

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  }
  // ...
}

モジュールシステム内のローカル登録

単一ファイルコンポーネントを使用している場合、それぞれインポートをして使用する必要がある。

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  }
  // ...
}

//ComponentA と ComponentC が ComponentB のテンプレート内で利用できるようになりました。

コンポーネントの構成

  • コンポーネントはツリー構造に構成する事ができる。
  • すなわち親子関係が出来上がる。

components.png

プロパティを用いた子コンポーネントへのデータの受け渡し

case

親から子へプロパティー（props）を渡すことでデータのやり取りが可能になる。


//親となるコンポーネント
const App = {
  data() {
    return {
      posts: [
        { id: 1, title: 'My journey with Vue' },
        { id: 2, title: 'Blogging with Vue' },
        { id: 3, title: 'Why Vue is so fun' }
      ]
    }
  }
}

// Appコンポーネントを引数にとりvueインスタンスを作成
const app = Vue.createApp(App)

app.component('blog-post', {
  props: ['title'],  //propsオプションに子で使用するプロパティ名を定義している。
  template: `<h4>{{ title }}</h4>`
})

app.mount('#blog-posts-demo')
  • コンポーネントをそれぞれレンダリングします
  • v-bind を用いて動的にプロパティを渡すことができると分かります。これはレンダリングする内容が事前に分からない場合に特に便利です。
<div id="blog-posts-demo">
  <blog-post
    v-for="post in posts"
    :key="post.id"
    :title="post.title"
  ></blog-post>
</div>

プロパティの型

プロパティを文字列の配列として列挙してきました。

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

プロパティをオブジェクトとして列挙し、プロパティのキーと値にそれぞれプロパティの名前と型を設定します:


props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // またはその他のコンストラクタ
}

単一方向のデータフロー

親のプロパティが更新されると子へと流れ落ちていきますが、逆向きにデータが流れることはありません。
これによって、子コンポーネントが誤って親の状態を変更すること(アプリのデータフローを理解しづらくすることがあります)を防ぎます。

  • 親から子へ渡ったデータを加工したい場合は子のコンポーネント独自のローカルデータとして処理をする必要がある。
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
  • プロパティを未加工の値として渡す場合。 この場合、プロパティの値を使用した算出プロパティを別途定義することを推奨します
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

JavaScript のオブジェクトと配列は、参照渡しされることに注意してください。参照として渡されるため、子コンポーネント内で配列やオブジェクトを変更すると、 親の状態へと影響します。

子コンポーネントのイベントを親がキャッチする。

case

ブログ記事のタイトルの大きさを子コンポーネントから変更し、親へイベントを$emit(放つ)ケース。

  • someイベント=$emit（イベント名）とすることで,子で発火したイベントを親へ放ち、子から親へ値の変化を通知する。

//親コンポーネント
const App = {
  data() {
    return {
      posts: [
        /* ... */
      ],
      postFontSize: 1 //フォントサイズを定義している。
    }
  }
}

//Appコンポーネントを引数にとり、Vueインスタンスを作成
const app = Vue.component(App)


//子コンポーネント
app.component('blog-post', {
  props: ['title'],
  emits: ['enlargeText'],//親へ通知するためのイベント名を定義
  template: `
    <div class="blog-post">
      <h4>{{ title }}</h4>
      <button @click="$emit('enlargeText')">
  Enlarge text
</button>
    </div>
  `
})
  • html
    • $emitで定義したイベント名=親プロパティ名 somethingとし、親へ通知するエンドポイントとなる。
<blog-post ... @enlarge-text="postFontSize += 0.1"></blog-post>

イベントと値を発行する

  • $emit( イベント名 , 値)とすることでイベントと値を親へ渡すことができる。
  • 親は$eventで第二引数の値を受け取る事ができる。
<blog-post ... @enlarge-text="postFontSize += $event"></blog-post>

イベントハンドラがメソッドの場合

<blog-post ... @enlarge-text="onEnlargeText"></blog-post>


methods: {
  onEnlargeText(enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

See the Pen Component basics: emitting events by Vue (@Vue) on CodePen.

コンポーネントでv-modelを使う

そもそものv-modelの仕組み。

<input :value="searchText" @input="searchText = $event.target.value" />
  1. @inputでinputを監視し、$event.target.valueでsearchTextプロパティに代入。
  2. v-bindでvalueを束縛し双方向バインディングを実現している。

これを熟語化したのが、v-model

<input v-model="searchText" />

コンポーネントで使用する場合は、内部的には以下のようになる。

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

これをinput要素で機能させると、以下のようになる。

  1. value 属性を modelValue プロパティにバインドする
  2. input では、 update:modelValue イベントを新しい値と共に発行する

See the Pen Untitled by (@caleiikv) on CodePen.

7
8
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?