この記事では、vue に関する関連知識を提供します。主に、基本的なイベント処理に関する関連問題を紹介します。Vue イベント処理は、すべての Vue プロジェクトに必要な側面です。ユーザー入力の取得、データの共有、その他多くのクリエイティブな方法に使用されます。一緒に見てみましょう。皆さんのお役に立てれば幸いです。
[関連する推奨事項: javascript ビデオ チュートリアル、vue.js チュートリアル]
Vue イベント処理はすべての Vue プロジェクトに必要な要素です。ユーザー入力の取得、データの共有、その他多くのクリエイティブな方法に使用されます。
この記事では、基本を説明し、イベントを処理するためのコード例をいくつか紹介します。
v-on ディレクティブ (略して @) を使用すると、DOM イベントをリッスンし、ハンドラー メソッドまたはインライン Javascript を実行できます。
<div v-on:click='handleClick' /> <!-- 相当于 --> <div @click='handleClick' />
について説明します。キャプチャしたい一般的なイベントのいくつかについては、ここをクリックして DOM イベントの完全なリストをご覧ください。
Web フレームワークにおける一般的な使用例は、子コンポーネントがその親コンポーネントにイベントを発行できるようにすることです。これにより、双方向のデータ バインディングが可能になります。
この例としては、入力コンポーネントから親フォームへのデータの送信が挙げられます。
イベントを発行するための構文は、Options API を使用しているか、Composition API を使用しているかによって異なります。
オプション API では、単純に this.$emit(eventName, payload):
export default {
methods: {
handleUpdate() {
this.$emit('update', 'Hello World')
}
}
}を呼び出すことができます。ただし、Composition API にはこれがありません。代わりに、Vue3 セットアップ メソッドを使用して Emit メソッドに直接アクセスできます。
setup メソッドの 2 番目のパラメーターはコンテキスト変数で、attrs、slot、および Emit の 3 つの属性が含まれます。
コンテキスト オブジェクトがインポートされている限り、オプション API と同じパラメーターを使用して Emit を呼び出すことができます。
export default {
setup (props, context) {
const handleUpdate = () => {
context.emit('update', 'Hello World')
}
return { handleUpdate }
}
}コードをクリーンアップする 1 つの方法は、オブジェクトの構造化を使用して Emit を直接インポートすることです。こんな感じです。
export default {
setup (props, { emit }) {
const handleUpdate = () => {
emit('update', 'Hello World')
}
return { handleUpdate }
}
}Options API を使用するか、Composition API を使用するかに関係なく、親コンポーネントは同じ方法でカスタム イベントをリッスンします。
<HelloWorld @update='inputUpdated'/>
発行するメソッドに値も渡される場合、インラインで作業するか別のメソッドを使用するかに応じて、2 つの異なる方法で値をキャプチャできます。
まず、渡された $event 値をテンプレートで使用できます。
<HelloWorld @update='inputUpdated($event)'/>
2 番目に、メソッドを使用してイベントを処理する場合、渡された値は最初のパラメーターとしてメソッドに自動的に渡されます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
