Vue.js 구성 요소 데이터 값을 하위 구성 요소에 전달

Vue.js 구성 요소 데이터 값을 하위 구성 요소에 전달

컴포넌트가 있습니다.TopBar.vue모달(자녀 컴포넌트)을 열려고 합니다.Feedback.vue).

를 바인드하려면 어떻게 해야 하나요?showFeedbackModal두 컴포넌트 사이의 특성

이 버튼을 클릭했을 때<a>을 붙이다.@click="showFeedbackModal = true가치true에 전달되다<feedback>컴포넌트와 모달.

TopBar.vue(메인)

<template>
    <div>
        <section class="top-bar level">
            <div class="level-left">
                ...

                <ul class="level-item">
                    <li><a @click="showFeedbackModal = true"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> Beta Feedback</a></li>
                </ul>
            </div>
            ...           
        </section> 

        <feedback :showFeedbackModal="showFeedbackModal"></feedback>            
    </div>
</template>

<script>
    export default {
        data() {
            return {
                showFeedbackModal: false
            }
        }
    }
</script>

Feedback.vue(모달)

<template>
    <div>
        <div v-if="showModal" class="modal is-active">
            <div class="modal-background" @click="showModal = false"></div>
            <div class="modal-content">
                <div class="box">
                    This is the feedback content
                </div>
            </div>
            <button class="modal-close" @click="showModal = false"></button>
        </div>
    </div>
</template>

<script>
    export default {        
        props: ['showFeedbackModal'],

        data() {
            return {
                showModal: false
            }
        },

        beforeMount() {
            this.showModal = this.showFeedbackModal;
        }
    }
</script>

설정을 하고 있습니다.showModal의 재산Feedback컴포넌트mounted이것은 컴포넌트가 DOM에 마운트되었을 때, 그 값이showModal무엇이든지 설정될 것이다.showFeedbackModal처음에는 이지만 다음 값은 변경되지 않습니다.showFeedbackModal항상 변해요.

그냥 만들어줘.showModal의 버팀목Feedback컴포넌트:

export default {        
    props: ['showModal'],
}

그리고 나서, 당신의TopBar컴포넌트, 이 컴포넌트가showFeedbackModalvariable은 의 값으로서showModal속성:

<feedback :showModal="showFeedbackModal"></feedback> 

---

필요한 경우Feedback모형의 컴포넌트가 부모 컴포넌트의 컴포넌트에 영향을 줄 수 있도록showFeedbackModal변수, 커스텀이벤트를 내보낼 수 있습니다.Feedback컴포넌트:

<button class="modal-close" @click="$emit('close')"></button>

그리고 나서 다음 값을 갱신합니다.showFeedbackModal이 이벤트의 핸들러:

<feedback 
  :showModal="showFeedbackModal" 
  @close="showFeedbackModal = false"
></feedback> 

언급URL : https://stackoverflow.com/questions/44504576/vue-js-pass-component-data-value-to-child-component