이벤트 버스 비상위-하위 구성 요소가 서로 통신하는 방법-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

이벤트 버스 비상위-하위 구성 요소가 서로 통신하는 방법

php中世界最好的语言

Apr 16, 2018 pm 02:25 PM

event 어떻게

이번에는 이벤트 버스 비부모와 자식 컴포넌트가 어떻게 통신하는지 보여드리겠습니다. 이벤트 버스 비부모와 자식 컴포넌트가 서로 통신하는 주의사항은 무엇입니까? 봐.

때때로 부모-자식 관계에 있지 않은 구성 요소도 통신해야 합니다. 간단한 시나리오에서는 빈 Vue 인스턴스를 중앙 event 버스로 사용합니다.

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

로그인 후 복사

더 복잡한 경우에는 vuex가 사용되는 전용

state

관리 모드 사용을 고려해야 합니다. 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>

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7401

자바 튜토리얼

1630

Cakephp 튜토리얼

1358

라라벨 튜토리얼

1268

PHP 튜토리얼

1217

Related knowledge

PHP8.0의 이벤트 처리 라이브러리: 이벤트 May 14, 2023 pm 05:40 PM

PHP8.0의 이벤트 처리 라이브러리: 이벤트 인터넷의 지속적인 발전과 함께 널리 사용되는 백엔드 프로그래밍 언어인 PHP는 다양한 웹 애플리케이션 개발에 널리 사용됩니다. 이 과정에서 이벤트 중심 메커니즘은 매우 중요한 부분이 되었습니다. PHP8.0의 이벤트 처리 라이브러리 Event는 보다 효율적이고 유연한 이벤트 처리 방법을 제공합니다. 이벤트 처리란 무엇입니까? 이벤트 처리는 웹 애플리케이션 개발에 있어 매우 중요한 개념입니다. 이벤트는 모든 종류의 사용자 행일 수 있습니다.

Steam 여름 세일 - Valve, AAA 게임 95% 할인 발표, 바이러스 게임 Palworld 및 콘텐츠 경고 할인 확인 Jun 26, 2024 pm 03:40 PM

Steam의 여름 세일은 이전에 최고의 게임 할인 행사를 주최했으며 올해는 Valve가 또 다른 홈런을 치는 것으로 보입니다. Steam 여름 할인 할인 게임 중 일부를 소개하는 예고편(아래 보기)이 방금 출시되었습니다.

Python에서 Pygame의 이벤트 이벤트 모듈을 사용하는 방법 May 18, 2023 am 11:58 AM

Pygame의 이벤트 모듈 Event(Event)는 Pygame의 중요한 모듈 중 하나이며 일반적으로 사용되는 마우스 클릭, 키보드 탭, 게임 창 이동, 창 크기 조정, 특정 플롯 트리거 및 종료 등 전체 게임 프로그램을 구성하는 핵심입니다. .게임 등은 "이벤트"로 간주될 수 있습니다. 이벤트 유형 파이게임은 이벤트를 처리하는 데 특별히 사용되는 구조, 즉 이벤트 큐를 정의하는데, 이 구조는 큐에서 "선착순 처리"라는 기본 원칙을 따르며, 이벤트 큐를 통해 사용자 작업을 순차적으로 처리할 수 있습니다. -by-one 방식(트리거 이벤트). 다음 표에는 파이게임에서 일반적으로 사용되는 게임 이벤트가 나열되어 있습니다. 이름 설명 QUIT 사용자가 창의 닫기 버튼을 누릅니다. ATIVEEVENTPy

JavaScript에서 브라우저 창의 크기가 조정될 때 이는 어떤 이벤트입니까? Sep 05, 2023 am 11:25 AM

브라우저 크기가 조정될 때 JavaScript에서 창 크기를 가져오려면 window.outerWidth 및 window.outerHeight 이벤트를 사용하세요. 예제 다음 코드를 실행하여 이벤트 −<!DOCTYPEhtml><html> <script>&am을 사용하여 브라우저 창 크기를 확인할 수 있습니다.

Steam 여름 세일 예고편에서 AAA 게임 거래 95% 할인을 알리고 Palworld, Stellaris의 가격 인하 확인, 콘텐츠 경고 Jun 26, 2024 am 06:30 AM

Windows 10을 평가하다: 한 박사의 관점 Jan 05, 2024 pm 12:11 PM

win10은 사용하기 매우 쉬운 시스템이지만 가끔 시스템에 문제가 생길 수 있기 때문에 컴퓨터에 능숙하지 않은 많은 사용자들은 문제를 완전히 해결하기 위해 시스템을 다시 설치하는 것을 선택하므로 대개 Dr. Han을 선택합니다. 그들은 이 소프트웨어가 어떤 것인지 알고 싶다면 기사를 살펴보자고 생각했습니다. win10에 대한 한박사님의 답변: 이것은 꽤 좋은 win10 시스템입니다. 이 소프트웨어를 사용하면 기본 지식이 없는 사용자도 CD-ROM 드라이브나 USB 플래시 드라이브 없이 간단한 조작과 프로세스를 통해 시스템을 다시 설치할 수 있습니다. 또한 이 소프트웨어는 시스템 백업 미러 시스템과 복원 미러 시스템이라는 두 가지 매우 중요한 시스템 재설치 도구를 제공합니다. 동시에 소프트웨어에는 원클릭 시스템 재설치, USB 디스크 재설치 등과 같은 다른 많은 기능이 있습니다.