Vue3 emitsオプションについて
初めに
皆さんこんにちは!
今回はVue3でシステムを実装時に新しくemitsオプションに出会ったのでこちらを記事にしたいと思います。
emitsオプションとは
まずはemitsオプションの概要から紹介させていただきます。
vue3アップデート時の新機能として追加されたオプションになります。
emit実行時にpropsと同じような形で、
受け取る際にバリデーションの実行や型の指定が可能になりました。
公式より
Vue 3 では emits オプションが、既存の props オプションと同様に提供されるようになりました。このオプションを使用して、コンポーネントが親に発行できるイベントを定義することができます。
Vue3 リファレンス
emitsの使い方
emitsはpropsのように構文設定することが可能になりました。
設定方法としては、2通りあって
1.配列での設定
2.オブジェクトでの設定
になります。
まずは公式の記述例を見ていきましょう。
const app = createApp({})
// 配列の構文
app.component('todo-item', {
emits: ['check'],
created() {
this.$emit('check')
}
})
// オブジェクトの構文
app.component('reply-form', {
emits: {
// バリデーションなし
click: null,
// バリデーションあり
submit: payload => {
if (payload.email && payload.password) {
return true
} else {
console.warn(`Invalid submit event payload!`)
return false
}
}
}
})
いかがでしょうか。
まさしくpropsのような書き方なのでVue2を利用されていた方であれば理解が早いと思います。
オブジェクト構文で記述することで、
型指定やバリデーションの実装も可能になっております。
最後に
良いVue3ライフを!!
参考にさせていただいたサイト
Author And Source
この問題について(Vue3 emitsオプションについて), 我々は、より多くの情報をここで見つけました https://qiita.com/hiroyuki_0507/items/a707704e6030c1193062著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .