Vue コンポーネントのカスタム イベントを詳しく見る

コンポーネントのカスタム イベントとは何ですか?この記事では、Vue コンポーネントのカスタム イベントについて深く理解し、カスタム イベントに関する注意点について説明します。

コンポーネントのカスタムイベントはコンポーネント間の通信手段であり、子コンポーネントが親コンポーネントにデータや動作を送信するのに適しています。 (学習ビデオ共有: vuejs チュートリアル)

概略図

コンポーネントのカスタム イベントに関する注意事項:

• 1. コンポーネントのカスタムイベントは子コンポーネントと親コンポーネント間の通信機能を実装するため、カスタムイベントのバインディングアクションは親コンポーネントで完了する必要があります。コンポーネント

• 2。コンポーネントのカスタム イベントのトリガー アクションは、サブコンポーネントで完了する必要があります。イベントをバインドした人がトリガーされます

コンポーネントのカスタム イベントを理解する前に、

props についても学びました。props は、親コンポーネント と通信するための 子コンポーネントも実現できます。 props コンポーネントのカスタム イベントに移行する方法から始めて、誰もがコンポーネントのカスタム イベントをよりよく理解できるようにします。また、2 つのメソッドの違いと類似点を比較することもできます

# #props を介したコンポーネント間の通信

App.vue 内:

<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
<TestA :getName="getName"/>
...
...
<script>
import TestA from &#39;./components/TestA&#39;
	export default {
		name:&#39;App&#39;,
		components:{TestA},
		data(){
			return{
				msg:&#39;你好呀&#39;
			}
		},
		methods:{
			getName(name){
				console.log(&#39;App组件收到了数据&#39;, name)
			},
		},
	}
</script>

コード スニペット内

getName()

メソッド内 name パラメータ は、サブコンポーネント

TestA.vue:

<!--通过点击事件传递数据-->
<button @click="sendName">将姓名发送给App组件</button>
...
...
<script>
export default {
    name:&#39;TestA&#39;,
    //接收父组件传递过来的props
    props:["getName"],
    data(){
        return{
            name:&#39;路飞&#39;,
            age:18
        }
    },
    methods:{
        sendName(){
            //点击按钮后，触发此方法，传递name给父组件
            this.getName(this.name)
        }
    }
}
</script>

によって渡されるパラメータを受け取るために使用されます。上記は、次のサブコンポーネントを使用します。親コンポーネントにメッセージを送信するための props データ転送

効果図は次のとおりです:

ページ初期化効果:

ボタンをクリックした後:

図からわかるように、ボタンをクリックすると、コンソールは親コンポーネントによって受信されたデータを出力します。子コンポーネントは

props

を通じて親にデータを送信します。 コンポーネントはデータを渡します。 #コンポーネント間の通信は、コンポーネントのカスタム イベントを通じて実現されます。

# #最初のステップは、カスタム イベントをコンポーネントにバインドすることです。この記事は始まります。つまり、カスタム イベントのバインドは親コンポーネントで完了します。

#2 番目に、子コンポーネントでは、コンポーネントのカスタマイズを完了するためにカスタム イベントをトリガーする必要があります。 イベント通信:

#効果図は次のとおりです:

ページ初期化効果:

ボタンをクリックした後:

画像からわかるように、ボタンをクリックすると、コンソールは親コンポーネントが受信したデータを出力します。

上記の 2 つの通信方法を通じて、子コンポーネントが props

を介して親コンポーネントにデータを渡すことがわかります。

前提条件は、親コンポーネントがコールバック関数を渡す必要があることです。子コンポーネント

にデータを渡すことができます。子コンポーネントがそれを受け取った後でのみ、親コンポーネントにデータを渡すことができます。また、コンポーネントのカスタム イベントは、指定されたカスタム イベントをトリガーするために

$emit メソッドを呼び出すだけで済みます そして、それを親コンポーネントに送信することができ、親コンポーネントはデータを渡します。 コンポーネント カスタム イベントに関するその他の知識ポイント

コンポーネント バインディングをカスタマイズする 2 番目の方法

App.vue :

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<TestA :getName="getName"/>
		<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据 -->
    <!--方法二-->
		<TestB ref="testb"/>
	</div>
</template>

<script>
import TestA from &#39;./components/TestA&#39;
import TestB from &#39;./components/TestB&#39;
	export default {
		name:&#39;App&#39;,
		components:{TestA, TestB},
		data(){
			return{
				msg:&#39;你好呀&#39;
			}
		},
		methods:{
			getName(name){
				console.log(&#39;我收到了数据&#39;, name)
			},
			send(name){
				console.log("send被调用了", name)
			}
		},
		mounted(){
			this.$refs.testb.$on(&#39;demo&#39;, this.send);
		}
	}
</script>

<style scoped>
.app{
	background-color: rgb(162, 255, 139);
	padding: 15px;
}
</style>

コンポーネントがマウント (マウント) された後、

TestB コンポーネントのインスタンス オブジェクト (vc)

を ref 属性を通じて取得します。## を使用します。 #this.$refs.コンポーネント名.$on('カスタム イベント名', callback function)

を使用して、サブコンポーネントのカスタム イベントのバインドを完了すると、同じ効果が得られます。

さらに、この方法を使用するとより柔軟で、ワンタイムのカスタム イベント、遅延、判定などの一部の操作を完了できます。 1 回限りのカスタム イベント

v-on:事件名.once="XXXX
或者
this.$refs.student.$once("事件名", 事件内容)

カスタム イベントのバインド解除

カスタム イベントの使用が終了したら、カスタム イベントのバインドを解除できます。これを行う利点は、プログラム パフォーマンスの占有を最小限に抑え、プログラム操作の効率を向上させることです。

カスタム バインド解除アクションは、サブコンポーネントでも実行されます。

Simple In otherつまり、バインドした人は誰でもバインドを解除できます

TestB

<template>
  <div>
      <h2>籍贯：{{native}}</h2>
      <h2>详细地址：{{adress}}</h2>
      <button @click="sendNative">点击触发自定义事件</button>
      <button @click="noBand">解绑自定义事件</button>
  </div>
</template>

<script>
export default {
    name:&#39;TestB&#39;,
    data(){
        return{
            native:&#39;东海&#39;,
            adress:&#39;东海风车村&#39;
        }
    },
    methods:{
        sendNative(){
            this.$emit(&#39;demo&#39;,this.native)
        },
        //解绑demo自定义事件
        noBand(){
            this.$off(&#39;demo&#39;);
        }
    }
    
}
</script>

<style scoped>
div{
    background-color: aquamarine;
    padding: 15px;
    margin-top: 5px;
}
</style>

もう 1 つのポイントは、多くのカスタマイズがある場合、イベントのバインドを解除する必要がある場合は、次のことができます。次のように書きます:

{方法体内
    this.$off();
}

直接不用传递任何参数，这样写的话，只要是给此组件绑定的任何自定义事件都会解绑。

总结

以上内容就是组件的自定义事件的使用，自定义事件虽然在Vuejs中不是一个非常重要的点，但是也是一个实际开发中比较常用的点，在进行某些业务操作时，使用自定义事件可能会节省开发时间以及优化代码，减少代码冗余量，组件自定义事件的具体操作还要看所处的业务逻辑和行为是什么。

如果觉得内容不错的话，记得点赞收藏~~~

（学习视频分享：web前端开发）

以上がVue コンポーネントのカスタム イベントを詳しく見るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。