ホームページ >ウェブフロントエンド >Vue.js >Vue コンポーネントのカスタム イベントとグローバル イベント バスを簡単に分析した記事
この記事では、Vue コンポーネントについて紹介し、Vue コンポーネントのカスタム イベントとグローバル イベント バスについて説明します。お役に立てば幸いです。
#1. カスタム イベント1. カスタム イベントとは
Customイベントはコンポーネント間の通信方法であり、子コンポーネントに適用できます -> 親コンポーネントはデータを送信します。2. 使用場所
App が親コンポーネントで School が子コンポーネントで、School が App にデータを転送したい場合、App でカスタム イベントを School にバインドする必要があります (イベントのコールバックは App 内にあります)。 , 親コンポーネント サブコンポーネントを使用するには、事前に自己定義イベントをバインドしておく必要があります。これにより、父と息子の間のデータ通信が完了します。 リトル A のお父さんが町で働いているようなものです。 , そして、リトル A は父親がいなくて寂しい、そしてその後どうなったのでしょうか? 彼の父親は、事前にリトル A に電話をかけ、もし私に会いたくなったらこの電話をかけるようにとリトル A に言いました。そうすれば、リトル A は電話をかけた後、父親と通信できるようになりました。は親コンポーネントのカスタム イベントであるため、データを親コンポーネントに渡すことができます。3. カスタム イベントをバインドします。
3.1 最初の方法: b8e8fd49a03356013c03e37ee5f7dfdf または 54a7222cd415026de644c6ac75dab481の親コンポーネント内#3.2 親コンポーネント内の 2 番目のメソッド:e1d445036f7d80b7d2547f492d0a7142mounted(){this . $refs. xxx. $on('shanyu' ,this. test)}
カスタム イベント内にネイティブ イベントを記述すると、デフォルトでカスタム イベントになるため、この問題を解決するために @xxx.native を使用します [関連する推奨事項:vuejs ビデオ チュートリアル 最初に、親コンポーネントにカスタム コンポーネントを記述します (カスタム イベントをトリガーしたい場合)一度のみ、once 修飾子または $once メソッドを使用できます)
// 在父组件内自定义个事件 getMyStudent(name) { console.log("App收到学校名:", name); this.studentName = name; } }, mounted() { this.$refs.student.$on("shanyu", this.getMyStudent); }
サブコンポーネントを見つけて、Student コンポーネント インスタンスで shanyu イベントをトリガーします
Triggerカスタム イベント: this. $emit('shanyu',data)
methods: { sendStudentName(){ //触发Student组件实例身上的shanyu事件 this.$emit('shanyu',this.name) } }
4. カスタム イベントのバインド解除 unbind(){
this.$off('shanyu')// 只适用于解绑1个事件
this.$off(['shanyu','demo'])// 适用于解绑多个
this.$off()// 适用于解绑全部
}
注: これを渡します. $refs. xxx. $on('shanyu', callback) がカスタム イベントをバインドする場合、コールバックはメソッドで設定するか、アロー関数を使用する必要があります。そうしないと、このポインティングに問題が発生し、Vue がエラーを報告することになります
1. グローバル イベント バスとは##A メソッドコンポーネント間の通信に適しており、コンポーネント間のあらゆる通信に適しています。カスタム イベントと同様に、カスタム イベントをはるかに超えて、兄弟間のコミュニケーションを実現できます
#2. 使用方法ここでの主な点は次のとおりです。 main.js と 2 つの兄弟コンポーネントの 3 つのファイルが含まれます。まず、vm のファイルである main.js を見つけて、vue インスタンスにグローバル イベント バスをインストールします。では、なぜ beforeCreate フックに配置する必要があるのでしょうか? beforeCreate ステートメントのサイクルフックの特徴は、データが更新される前に実行されることです。$bus は現在のアプリケーションの vm です。バスはバスだけでなく、バスという意味もあります。
new Vue({ el: "#app", render: h => h(App), // 使用beforCreate这生命周期钩子来进行兄弟间的通信 beforeCreate() { Vue.prototype.$bus = this // 安装全局事件总线 } })3. イベント バスの使用
##1. データの受信
##コンポーネント A がデータを受信したい場合は、カスタム イベントを $ にバインドします。コンポーネント A 内のバスの場合、イベント コールバックは A コンポーネント自体に残ります。 Methods(){mounted() {this . $bus . $on( 'xxxx' ,this .demo)}3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { name: "School", data() { return { name: "山鱼特效屋", address: "南京北城区" }; }, mounted() { this.$bus.$on('shanyu', (data) => { console.log("我是School组件,我收到了数据", data); }); }, //使用完之后销毁该绑定事件避免后期错误使用 beforeDestroy() { this.$bus.$off("hello") }, } 2cacc6d41bbb37262a98f745aa00fbf02. データ
d477f9ce7bf77f53fbcf36bec1b69b7a 1b036e027ab888e5acdaae6ac491e863 c1a436a314ed609750bd7c7d319db4da学生姓名:{{name}}2e9b454fa8428549ca2e64dfac4625cd c1a436a314ed609750bd7c7d319db4da学生性别:{{sex}}2e9b454fa8428549ca2e64dfac4625cd 5c8a0c1f170e64ce29befb688e7617d4点击将数据给兄弟School65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { name: "Student", data() { return { name: "张三", sex: "男" }; }, // 配置一个methods项 methods: { snedStudentName(){ // 选择给谁提供数据 this.$bus.$emit('shanyu',this.name) } }, } 2cacc6d41bbb37262a98f745aa00fbf0注: 現在のコンポーネントで使用されているイベントのバインドを解除するには、beforeDestroy フックで $off を使用することをお勧めします。
vuejs 入門チュートリアル
、基本プログラミング ビデオ
)以上がVue コンポーネントのカスタム イベントとグローバル イベント バスを簡単に分析した記事の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。