Vue.js - 다른 컴포넌트에 슬롯 추가

Vue.js - 다른 컴포넌트에 슬롯 추가

Vue.js에서 범용 드롭다운/팝오버/툴팁 시스템을 구축하려고 합니다.

아이디어는 중첩된 팝오버 에스크 요소를 열고 z 계층화, 포커스, 하위 팝오버 닫힘에 대한 재포커스 등을 관리할 수 있도록 하는 것입니다.기본 요소 위치 지정 코드는 테더 또는 포퍼와 같은 코드일 수 있습니다.

원하는 API는 다음과 같습니다.

<div id="app">
    <div class="page">
        <tooltip>
            <button>Hover this</button>
            <div>Contents of tooltip</div>
        </tooltip>
    </div>
    <popover-container/>
</div>

원하는 DOM의 최종 결과는 다음과 같습니다.

<div id="app">
    <div class="page">
        <button>Hover this</button>
    </div>
    <div class="popover-container">
        <div>Contents of tooltip</div>
    </div>
</div>

반드시 필요한 것은<tooltip/>컴포넌트가 랩되지않습니다.<button/>추가 DOM 내의 모든 추가 DOM.

저는 여러 가지 방법을 시도해 보았지만, 그 중 어느 것도 효과가 없거나 적어도 제가 원하는 방식으로는 효과가 없습니다.

1. 슬롯
슬롯을 사용하여<tooltip/>요소.이로 인해 많은 문제가 발생합니다.
먼저 툴팁 내용이 버튼 바로 뒤에 추가됩니다.
둘째, 템플릿에 여러 루트 노드를 포함할 수 없기 때문에<button/>툴팁의 내용을 다른 요소에 포함시킵니다(no-no).

와 같은 것을 시도해 보았다.vue-popper-js툴팁의 내용을 본문에 추가하는데, 이는 다음 경우에만 발생합니다.$nextTick이는 템플릿이 래퍼 스팬을 사용하여 렌더링해야 함을 의미합니다.

2. 가상 DOM
Vue의 것을 써봤다.render기능.버튼만 렌더링할 수 있고, 스탠드아론도 사용할 수 있습니다.Vue()명령어를 전송하기 위한 버스<popover-container/>툴팁 콘텐츠를 렌더링하는 컴포넌트는 DOM이 변경될 때마다 콘텐츠를 업데이트할 수 없습니다.

게다가, 문서화된 복제 방법은 없는 것 같습니다.VNode읽기 전용이므로 이벤트 핸들러를 추가할 수 없습니다.내가 이걸 같이 쳤는데, 바보같고 두 번째가 되면 작동이 안 돼<button/>조금 더 복잡했습니다.

render: function (createElement) {
    let slotContent = this.$slots.default[0].componentOptions;
    return createElement(slotContent.Ctor, {
        props: slotContent.propsData,
        nativeOn: {
            mouseenter: this.onMouseEnter,
            ...slotContent.listeners
        }
    }, this.$slots.default);
}

이 경우에도 슬롯을 사용하고 있습니다만, 상위 컴포넌트의 툴팁 컨텐츠에 대한 갱신은 여기서 행해지지 않습니다.툴팁을 열 때마다 툴팁에 작성된 이전 콘텐츠가 표시됩니다.

아무튼 어떻게 해야 되지?Vue에서 그게 가능하긴 해요?

언급URL : https://stackoverflow.com/questions/46757569/vue-js-appending-a-slot-to-another-component