0
0

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 3 years have passed since last update.

[Vue.js] $emitを使って子で作成したイベントを親コンポーネントで発火させる

Last updated at Posted at 2020-12-08

emitを使ってカスタムイベントを作り出し、それを親コンポーネントで発火させる例を記事にあげます。
子コンポーネントで作成したイベントを親で発火させて定義したメソッドを呼ぶという内容です。
最近仕事でフロントエンドを触り始めたので備忘録として書きました。
間違いや覚えておいた方が良い知識があればコメント下さい!!

child_component.vue
# 子コンポーネント
<script>
    export default {
        methods: {
            test(){
                this.$emit('input');
            }
        }
    }
</script>
parent_component.vue
# 親コンポーネントでのイベント発火
<template>
    <input @input='onSubmit' />
</template>

<script>
    export default {
      methods: {
        onSubmit() {
          console.log('test')
        },
      },
    }
</script>

イベント発火させてメソッドを呼び出すとconsole.logの中身がコンソールに表示される

debug.
# console.logの中身
test

参考記事
https://qiita.com/d0ne1s/items/f88ecd6aaa90c7bbc5d4

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?