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