JS 自体に付属するクリック、キーアップ、マウスアウトなどはすべて組み込みイベントです。どちらも HTML 要素に使用されます。
カスタム イベントはコンポーネントによって使用され、子コンポーネントから親コンポーネントにデータを渡すのに適しています。
子コンポーネントが親コンポーネントにデータを渡すには 2 つの方法があります。
最初の方法: 小道具を使用する
2 番目の方法: カスタム イベントを使用する
props を介して子コンポーネントから親コンポーネントにデータを渡す
実装手順:
- まず、親コンポーネントAPPのメソッドで関数を定義し(パラメータを受け取る必要があります)、この関数を子コンポーネントのタグにバインドします
- 子コンポーネントの props 宣言を通じてこの関数を受け取り、クリック イベントを定義します
- サブコンポーネントのメソッドにイベント関数を記述し、これを介してデータを渡します。
コード例:
APP コンポーネント コード:
//给子组件绑定函数
<School :getSchoolName="getSchoolName"/>
//定义一个接收参数的函数
methods: {
getSchoolName(name){
console.log('app收到了学校名',name)
}
}サブコンポーネントコード:
//定义一个click事件
<button @click="sendSchoolName">把学校名字给app</button>
//声明接收父组件函数
props:['getSchoolName'],
//调用事件函数并传参
methods: {
sendSchoolName(){
this.getSchoolName(this.name)
}
}カスタム イベントを通じて子コンポーネントから親コンポーネントにデータを渡す
カスタム イベントをバインドする 2 つの方法: v-on を使用するか、ref を使用する
v-onバインディング
実装手順:
- まず、v-on を子コンポーネント タグに渡します: カスタム イベント名 = "関数名"、関数をバインドし、親コンポーネント APP のメソッドでこの関数を定義します (パラメーターを受け取る必要があります)。
- サブコンポーネントでは、最初にクリック イベントを定義し、次にクリック イベント関数をメソッドに記述し、$this.$emit() を使用して APP コンポーネントでカスタム イベントをトリガーします。括弧内の最初のパラメーターは自己イベントです。名前、および次のパラメータはデータです (注: カスタム イベントにバインドされているサブコンポーネントは、イベントをトリガーするサブコンポーネントに移動します)。
- サブコンポーネントのメソッドでこの関数をトリガーする関数を定義し、これを通じてデータを渡します。
コード例:
APP コンポーネント コード:
//给子组件绑定函数
<Student v-on:self="incident"/>
//定义一个接收参数的函数
methods: {
incident(name){
console.log('app收到了学生名',name)
}
}サブコンポーネントコード:
//定义一个click事件
<button @click="sendStudentName">把学生名字给app</button>
//调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
methods: {
sendStudentName(){
this.$emit('self',this.name)
}
}参照バインディング
実装手順:
- まず、親コンポーネントで子コンポーネント タグの ref バインディングを使用して、コンポーネントのインスタンス オブジェクトを取得できるようにします。
- 親コンポーネントに、this.$refs.Instance object.$on('カスタム属性名', this.データ受信用関数名)を使用する構成項目mounted()を追加します。
- 子コンポーネント内のコードは変更されません
コード例:
APP コンポーネント コード:
//给子组件绑定函数
<Student ref="student"/>
//定义一个接收参数的函数
methods: {
incident(name){
console.log('app收到了学生名',name)
}
}
//绑定自定义事件
mounted() {
this.$refs.student.$on('self',this.incident)
}サブコンポーネントコード:
//定义一个click事件
<button @click="sendStudentName">把学生名字给app</button>
//调用事件函数，通过$this.$emit()去触发APP组件里面的自定义事件
methods: {
sendStudentName(){
this.$emit('self',this.name)
}
}カスタムイベントのバインドを解除する
- カスタム イベントのバインドを解除します: this.$off('カスタム イベント名')
- 複数のカスタム イベントのバインドを解除します: this.$off(['カスタム イベント名 1','カスタム イベント名 2'])
- すべてのカスタム イベントのバインドを解除します: this.$off()
知らせ
- this.$refs.xxx.$on('カスタム イベント名', callback) を通じてカスタム イベントをバインドする場合、コールバックはメソッドで設定するか、アロー関数を使用する必要があります。そうしないと問題が発生します。
- コンポーネントはネイティブ DOM イベントにバインドすることもでき、ネイティブ修飾子を使用する必要があります。
- カスタム イベントを 1 回だけトリガーしたい場合は、once 修飾子または $once メソッドを使用できます。
