Zenn
🔧

[Nuxt2(bridge)] Composablesな関数内でemitする方法

2023/04/06に公開
Nuxt
Vue.js
#
nuxt2
tech

動作環境

  • nuxt: ^2.15.8
  • @nuxtjs/composition-api: ^0.32.0

親コンポーネント

ParentComponent.vue
<template>
  ...
  <FooComponent
    @change-value="changeValue($event)"
  />
  ...
<template>

子コンポーネント

FooComponent.vue
<script lang="ts">
import {
  defineComponent
} from '@nuxtjs/composition-api'

export default defineComponent({
  emits: ['change-value'],
  setup (props, { emit }) {
    const { store } = useContext()

    const {
      bar
    } = useFoo(props, emit)
    ...
  }
})

ポイントは、コンポーネントvue内で、Composableな関数useFooに、emitを渡している点です

Composableな関数

useFoo.ts
const useFoo = (props store: Store<any>, emit:(event: string, ...args: any[]) => void) => {
  ...
  const bar() => {
    ...
  }
  
  const hoge() => {
    const myValue = 'change'
    emit('change-value', myValue)
  }
  ...
  return {
    bar
  }
}

composableな関数では、引数でemitを受け取ります。そのemitを用いて、hoge()内で発火します。

Discussion