vuej의 글로벌 구성 요소로 데이터 전달

vuej의 글로벌 구성 요소로 데이터 전달

스택오버플로우에 대한 나의 첫 번째 질문이다.내가 그것을 수정해야 할 필요가 있는지 언제든지 말해줘.

글로벌 컴포넌트를 만들었는데, 바로 '팝업' 입니다.부에를 하다

<div class="popup-background" id="vue-popup" @click.self="$emit('close')">
    <div class="popup-info-box" :class="customClasses" :style="infoBoxPosition()">            
        <slot></slot>
    </div>
</div>

<script>
export default {
    props : {
        customClasses : {
            default : () => '',
        },
    },
    data() {
        return {
            hasMounted : false,
        }
    },
    methods : {
        infoBoxPosition() {
            if( !this.hasMounted ) {
                return { 'right' : '0px', 'top' : '0px' };
            }

            let parent = document.querySelector('#vue-popup').parentElement;
            let bounds = parent.getBoundingClientRect();

            return { 'right' : ( document.body.clientWidth - bounds.right ) + 'px', 'top' : bounds.bottom + 'px' };
        }
    },
    mounted() {
        this.hasMounted = true;
    },
}

현재 동작

내 팝업창에 html을 전달하고 있어.내 필터 구성 요소에서 직접 vue 구성 요소.

예: 필터.부에를 하다

<div class="menu" v-for="( filter, key ) in filters">
        <div class="filter-button" @click="openMenu( key )">
            <span>
                {{ $t(`filters.${key}`) }}
            </span>
        </div>
        <transition name="fade">
            <Popup :customClasses="{ 'filter-menu' : filter.hide }" v-show="getActiveMenu == key" @close="toggleMenu( '' )">
                <div class="filter-menu-top">
                    <div>
                        {{ filter.values.min }}
                    </div>
                    <div>
                        {{ filter.values.max }}
                    </div>
                </div>
                <div class="filter-menu-bottom">
                    <div class="filter-action-button apply" @click="applyFilter( filter, key )">
                        {{ $t(`filters.actions.apply`) }}
                    </div>
                </div>
            </Popup>
        </transition>
    </div>

문제.

Popping을 등록했다.글로벌 컴포넌트로서, 나는 이제 그것을 수입할 필요 없이 다른 모든 컴포넌트에서 사용할 수 있다.잘됐네, 하지만 다른 문제가 있어.

Poppo.vue의 콘텐츠를 동적으로 변경하고 싶다.예를 들어, 사용자가 필터 버튼을 클릭하면 팝업 내에 필터 메뉴가 표시되도록 되어 있다.사용자가 sing in을 클릭하면 팝업 안쪽에 signin form 등이 나타난다.

팝업.vue는 상당히 일반적이어야 하며, 드롭다운 동작이 필요한 모든 곳에 사용하고 싶다.각 구성 요소의 템플릿에서 사용하지 않고 팝업 내용을 관리하는 방법

원하는 솔루션

팝업 표시 방법.내 앱의 vue 구성 요소.필요한 모든 구성 요소에 내 팝업을 넣지 않고 구성 요소에서 팝업 콘텐츠를 관리하고 vue 구성 요소를 관리하십시오.

생각들

나는 Vuex를 사용하고 각 구성 요소에서 일부 작업을 바인딩하여 템플릿을 Vuex 상태로 문자열로 전송하여 내 팝업에서 읽어보려고 생각했다.부에 구성 요소그러나 그것은 신뢰할 수 없고 해결할 수 없는 해결책처럼 보인다.

미리 고맙다.

참조URL: https://stackoverflow.com/questions/52271851/passing-data-to-global-component-in-vuejs