javascript - Vue의 하위 구성요소에서 상위 구성요소로 매개변수를 전달하는 방법

Question

• 배경: Vue+ES6, 상위 구성 요소가 생성된 후 하위 구성 요소가 호출되고 클릭 시 이벤트 트리거가 기본 구성 요소(하위 구성 요소의 하위 구성 요소)에 캡슐화되었습니다.

• 질문: 상위 구성 요소에 이벤트 바인딩이 없을 때 하위 구성 요소는 어떻게 매개 변수를 상위 구성 요소에 전달합니까?

Answer 1

1. EventBus(질문의 요구 사항을 완전히 충족하지 않는 이벤트 바인딩이 없는 상황)

2. Vuex

Answer 2

디스패치

Answer 3

부모-자식 컴포넌트 통신

Answer 4

$방출()

Answer 5

하위 구성 요소는 v-on을 사용하여 이벤트를 수신한 다음 트리거되면 $emit라는 이벤트를 보냅니다. 그런 다음 상위 구성 요소도 v-on을 사용하여 전송한 이벤트를 수신합니다. 상위 구성 요소에서 정의한 이벤트를 실행합니다.

Answer 6

위 분이 이미 분명히 말씀하셨는데, 제가 보충하러 왔습니다
child.vuechild.vue

<template>
    <p id="test">向父传递</p>
</template>
<script>
    export default {
        methods: {
            $('#test').click(()=>{
                this.$emit('data', '这是我要传的参数');
            })
        }
    }
</script>

parent.vue 으아아아

parent.vue🎜 으아아아

Answer 7

$방출()

Answer 8

하위 구성 요소 this.$emit("event",data)

상위 구성 요소 @event