コンポーネント

概要

基本的にVueでは多くのネストされたコンポーネントを使用する。
親コンポーネントは、別のコンポーネントを子コンポーネントとしてレンダリングすることができる。
Reactでいう描画コンポーネントである。

importと使用

他コンポーネントを使用するには、まずインポートをする必要がある。

import ChilldComp from './ChildComp.vue'

そして以下のように使用する。

<ChildComp />

props

子コンポーネントは、親コンポーネントからpropsを介して入力を受け取ることができる。
まず受け入れるpropsを宣言する。

<!-- ChildComp.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>

このdefinePropsは特にインポートせずに使用することができる。

親コンポーネントはpropsを子に渡すこともできる。

<ChildComp :msg="greeting" />

コード

1. App.vue

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
 
const greeting = ref('Hello from parent')
</script>
 
<template>
  <ChildComp :msg="greeting" />
</template>

2. ChildComp.vue

<script setup>
const props = defineProps({
  msg: String
})
</script>
 
<template>
  <h2>{{ msg || 'No props passed yet' }}</h2>
</template>

イベントの発行

子コンポーネントは親コンポーネントにイベントを発行()することができる。

<script setup>
//発行されるイベントを宣言
const emit = defineEmits(['response'])
 
//引数付きで宣言する
emit('response', 'hello from child')

親コンポーネントはv-onを介して子が発行するイベントを使用できる。
ハンドラは子のemit呼び出しから追加に引数を受け取っている。

<ChildComp @response="(msg) => childMsg = msg" />

コード

1. App.vue

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
 
const childMsg = ref('No child msg yet')
</script>
 
<template>
  <ChildComp @response="(msg) => childMsg = msg" />
  <p>{{ childMsg }}</p>
</template>

2. ChildComp.vue

<script setup>
const emit = defineEmits(['response'])
 
emit('response', 'hello from child')
</script>
 
<template>
  <h2>Child component</h2>
</template>

スロット

<slot>を使用することでpropsを介さずに値を渡すこともできる。

1. App.vue

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
 
const msg = ref('from parent')
</script>
 
<template>
  <ChildComp>Message: {{ msg }}</ChildComp>
</template>

2. ChildComp.vue

<template>
  <slot>Fallback content</slot>
</template>

ここでの<slot>の中身は親コンポーネントが何もコンテンツを渡さなかった場合にレンダリングされる。