vue.js3超初心者向け。親コンポーネントで子コンポーネントを動作させる方法
11 回閲覧されました
みなさんこんにちは、jonioです。
今回はvue.js3で親コンポーネントで子コンポーネントを動作させる方法について簡単な解説します。
Laravelの無料学習サイトを作りました
Laravelを勉強したい人向けの無料の学習サイトを作りました。
ここからリンクに飛べますのでぜひ利用してください。
コード
親コンポーネントの記述を下記にします。
<template>
<div>
<button @click="show = true">開く</button>
<ChildModal v-if="show" />
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildModal from './ChildModal.vue'
const show = ref(false)
</script>子コンポーネントのコードを下記にします。
<template>
<div class="modal">
<p>これはモーダルです</p>
<button @click="emit('close')">× 閉じる</button>
</div>
</template>
<script setup>
const emit = defineEmits(['close'])
</script>コードの解説
子コンポーネントを親コンポーネントで開くのは簡単です。
親コンポーネントの3行目をクリックすると5行目でshowがtrueになるので開きます。
問題は子コンポーネントの閉じ方です。
親コンポーネントで子コンポーネントが表示されているので子コンポーネントで直接コードを書いて閉じようとさせても動作しません。
どうするかというと子コンポーネントのメソッドを親コンポーネントに渡さないといけません。
それをしているのが子コンポーネントの9行目です。
「defineEmits([‘親コンポーネントに渡すメソッド名’])」と記述します。
サンプルコードの親コンポーネントに渡すメソッド名は「close」です。
それだけではダメでcloseメソッドを使う時に「emit(‘close’)」（4行目）と記述しないといけません。
親コンポーネントで子コンポーネントのcloseを受け取る為に下記のコードに修正します。
<template>
<div>
<button @click="show = true">開く</button>
<ChildModal v-if="show" @close="show = false" /> //この行を修正
</div>
</template>
<script setup>
import { ref } from 'vue'
import ChildModal from './ChildModal.vue'
const show = ref(false)
</script>「@close」がありますがcloseは子コンポーネントから渡されたメソッド名です。
これで子コンポーネントのcloseメソッドを親コンポーネントで動作させることができます。