배경: Vue+ES6, 상위 구성 요소가 생성된 후 하위 구성 요소가 호출되고 클릭 시 이벤트 트리거가 기본 구성 요소(하위 구성 요소의 하위 구성 요소)에 캡슐화되었습니다.
질문: 상위 구성 요소에 이벤트 바인딩이 없을 때 하위 구성 요소는 어떻게 매개 변수를 상위 구성 요소에 전달합니까?
EventBus(질문의 요구 사항을 완전히 충족하지 않는 이벤트 바인딩이 없는 상황)
Vuex
디스패치
부모-자식 컴포넌트 통신
$방출()
하위 구성 요소는 v-on을 사용하여 이벤트를 수신한 다음 트리거되면 $emit라는 이벤트를 보냅니다. 그런 다음 상위 구성 요소도 v-on을 사용하여 전송한 이벤트를 수신합니다. 상위 구성 요소에서 정의한 이벤트를 실행합니다.
위 분이 이미 분명히 말씀하셨는데, 제가 보충하러 왔습니다child.vuechild.vue
child.vue
<template> <p id="test">向父传递</p> </template> <script> export default { methods: { $('#test').click(()=>{ this.$emit('data', '这是我要传的参数'); }) } } </script>
parent.vue 으아아아
parent.vue
하위 구성 요소 this.$emit("event",data)
상위 구성 요소 @event
EventBus(질문의 요구 사항을 완전히 충족하지 않는 이벤트 바인딩이 없는 상황)
Vuex
디스패치
부모-자식 컴포넌트 통신
$방출()
하위 구성 요소는 v-on을 사용하여 이벤트를 수신한 다음 트리거되면 $emit라는 이벤트를 보냅니다. 그런 다음 상위 구성 요소도 v-on을 사용하여 전송한 이벤트를 수신합니다. 상위 구성 요소에서 정의한 이벤트를 실행합니다.
위 분이 이미 분명히 말씀하셨는데, 제가 보충하러 왔습니다
child.vue
child.vue
parent.vue
으아아아parent.vue
🎜 으아아아$방출()
하위 구성 요소 this.$emit("event",data)
상위 구성 요소 @event