이 글은 주로 Vue의 이벤트 버스 비부모-자식 구성 요소에 대한 통신 분석을 소개합니다. 편집자는 그것이 꽤 좋다고 생각하므로 지금 공유하고 참고로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.
부모-자식 관계가 아닌 구성 요소도 통신해야 하는 경우가 있습니다. 간단한 시나리오에서는 빈 Vue 인스턴스를 중앙 이벤트 버스로 사용합니다.
var bus = new Vue() // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function (id) { // ... })
더 복잡한 경우에는 전용 상태 관리 모드 사용을 고려해야 합니다. 이것이 바로 vuex가 사용되는 것입니다. 형제 관계의 구성 요소 간의 의사 소통 중개자.
코드 예:
<!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>
렌더링은 다음과 같습니다.
관련 권장 사항:
vue
에서 여러 번 트리거되는 eventbus를 해결하는 방법 이것과 심지어 JS t의 차이점 자세한 설명
위 내용은 Vue의 이벤트 버스 비부모-자식 구성요소 통신에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!