event bus非父子组件怎样相互通信-tutorial js-php.cn

Rumah

hujung hadapan web

tutorial js

event bus非父子组件怎样相互通信

php中世界最好的语言

Apr 16, 2018 pm 02:25 PM

event bagaimana

这次给大家带来event bus非父子组件怎样相互通信，event bus非父子组件相互通信的注意事项有哪些，下面就是实战案例，一起来看一下。

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的Vue实例作为中央事件总线：

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

Salin selepas log masuk

在更多复杂的情况下，你应该考虑使用专门的状态管理模式.就是用到了vuex

eventBus是作为兄弟关系的组件之间的通讯中介。

代码示例：

<!DOCTYPE html>
<html>
<head>
<title>eventBus</title>
<script src="http://cdn.jsdelivr.net/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<p id="todo-app">
<h1>todo app</h1>
<new-todo></new-todo>
<todo-list></todo-list>
</p>
<script>
var eventHub = new Vue( {
data(){
return{
todos:['A','B','C']
}
},
created:function () {
this.$on('add', this.addTodo)
this.$on('delete', this.deleteTodo)
},
beforeDestroy:function () {
this.$off('add', this.addTodo)
this.$off('delete', this.deleteTodo)
},
methods: {
addTodo: function (newTodo) {
this.todos.push(newTodo)
},
deleteTodo: function (i) {
this.todos.splice(i,1)
}
}
})
var newTodo = {
template:`<p><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></p>`,
data(){
return{
newtodo:''
}
},
methods:{
add:function(){
eventHub.$emit('add', this.newtodo)
this.newtodo = ''
}
}
}
var todoList = {
template:`<ul><li v-for="(index,item) in items">{{item}} \
     <button @click="rm(index)">X</button></li> \
     </ul>`,
     data(){
     return{
     items:eventHub.todos
     }
     },
     methods:{
     rm:function(i){
     eventHub.$emit('delete',i)
     }
     }
}
var app= new Vue({
el:'#todo-app',
components:{
newTodo:newTodo,
todoList:todoList
}
})
</script>
</body>
</html>

Salin selepas log masuk

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Simpan Fail Lokasi: Di manakah & bagaimana untuk melindunginya?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7401

Tutorial Java

1630

Tutorial CakePHP

1358

Tutorial Laravel

1268

Tutorial PHP

1217

Tunjukkan Lagi

Related knowledge

Pustaka pemprosesan acara dalam PHP8.0: Acara May 14, 2023 pm 05:40 PM

Pustaka pemprosesan acara dalam PHP8.0: Peristiwa Dengan pembangunan berterusan Internet, PHP, sebagai bahasa pengaturcaraan akhir belakang yang popular, digunakan secara meluas dalam pembangunan pelbagai aplikasi Web. Dalam proses ini, mekanisme yang didorong oleh peristiwa telah menjadi bahagian yang sangat penting. Pustaka pemprosesan acara Acara dalam PHP8.0 akan menyediakan kami kaedah pemprosesan acara yang lebih cekap dan fleksibel. Apakah pengendalian acara? Pengendalian acara adalah konsep yang sangat penting dalam pembangunan aplikasi web. Acara boleh terdiri daripada sebarang jenis baris pengguna

Jualan Musim Panas Steam - Valve memberi diskaun 95% untuk permainan AAA, mengesahkan diskaun untuk permainan viral Palworld dan Amaran Kandungan Jun 26, 2024 pm 03:40 PM

Jualan Musim Panas Steam sebelum ini telah menjadi tuan rumah kepada beberapa diskaun permainan terbaik, dan tahun ini nampaknya akan disusun untuk satu lagi kendalian rumah oleh Valve. Treler (tonton di bawah) yang mengusik beberapa permainan diskaun Jualan Musim Panas Steam baru sahaja dikeluarkan i

Cara menggunakan modul acara Acara Pygame dalam Python May 18, 2023 am 11:58 AM

Modul Acara (Event) Pygame ialah salah satu modul penting Pygame Ia adalah teras membina keseluruhan program permainan, seperti klik tetikus yang biasa digunakan, ketik papan kekunci, pergerakan tetingkap permainan, saiz semula tetingkap, mencetuskan plot tertentu dan keluar. . Permainan, dsb., ini boleh dianggap sebagai "acara". Jenis acara Pygame mentakrifkan struktur yang khusus digunakan untuk memproses acara, iaitu baris gilir peristiwa Struktur ini mengikut prinsip asas "dahulu diproses" dalam baris gilir, kita boleh memproses operasi pengguna secara teratur dan satu -oleh satu cara ( peristiwa pencetus). Jadual berikut menyenaraikan acara permainan yang biasa digunakan dalam Pygame: Nama Penerangan BERHENTI Pengguna menekan butang tutup tetingkap ATIVEEVENTPy

Dalam JavaScript, apabila tetingkap penyemak imbas diubah saiz, peristiwa manakah ini? Sep 05, 2023 am 11:25 AM

Gunakan peristiwa window.outerWidth dan window.outerHeight untuk mendapatkan saiz tetingkap dalam JavaScript apabila penyemak imbas mengubah saiz. Contoh Anda boleh cuba menjalankan kod berikut untuk menyemak saiz tetingkap penyemak imbas menggunakan acara −<!DOCTYPEhtml><html> <skrip>&am

Treler Steam Summer Sale menggoda 95% diskaun tawaran permainan AAA, mengesahkan potongan harga untuk Palworld, Stellaris, Amaran Kandungan Jun 26, 2024 am 06:30 AM

Menilai Windows 10: Perspektif Dr. Han Jan 05, 2024 pm 12:11 PM

win10 adalah sistem yang sangat mudah digunakan, tetapi kadang-kadang akan ada masalah dengan sistem, jadi ramai pengguna yang tidak mahir dalam komputer akan memilih untuk memasang semula sistem untuk menyelesaikan masalah sepenuhnya. Mereka biasanya memilih Dr Han, jadi mereka fikir Jika anda ingin tahu bagaimana perisian ini, mari kita lihat dalam artikel. Jawapan Dr. Han tentang win10: Ini adalah sistem win10 yang cukup bagus. Perisian ini membenarkan pengguna tanpa pengetahuan asas untuk memasang semula sistem melalui operasi dan proses yang mudah tanpa memerlukan pemacu CD-ROM atau pemacu kilat USB. Perisian ini juga menyediakan dua alat pemasangan semula sistem yang sangat penting: sistem cermin sandaran sistem dan sistem cermin pulihkan. Pada masa yang sama, terdapat banyak fungsi lain dalam perisian, seperti pemasangan semula sistem satu klik, pemasangan semula cakera USB, dsb.

Tesla menghantar jemputan Robotaxi untuk acara demo pemanduan autonomi 10 Oktober di LA Sep 27, 2024 am 06:20 AM

Pada mulanya dijangkakan bahawa Tesla akan memperkenalkan Robotaxi yang bocor sebelum ini pada Ogos tahun ini, tetapi Ketua Pegawai Eksekutif Elon Musk menangguhkan acara itu, memetik perubahan estetik pada bahagian hadapan robotaxi dan masa tambahan yang diperlukan untuk beberapa minit terakhir.