vue3을 사용하여 슬롯에서 HTMLElement를 얻는 방법은 무엇입니까?

Question

当我尝试开发 Layer 组件时发生了一些事情。代码如下：

// Wrapper.vue

<템플릿>
  


<스크립트 lang="ts" 설정>
수입 {
  정의프로프스,
  심판,
  보다,
  사용속성,
  마운트됨,
  마운트 해제됨,
  getCurrentInstance,
} "vue"에서;;

const 소품 = 정의Props({
  이름: { 유형: 문자열, 기본값: "" },
  zIndex: { 유형: 숫자, 기본값: 0 },
});
const attrs = useAttrs();
const inst = getCurrentInstance();

const 관찰자 = ref(널);

보다(
  () => [props.zIndex, 소품.이름],
  () => {
    setBrothersAttrs();
  }
);

onMounted(() => {
  el = inst?.vnode.el;
  만약 (엘) {
    if (!observer.value)
      관찰자.값 = 새로운 MutationObserver(setBrothersAttrs);
    관찰자.value.observe(el.parentElement, { childList: true });
  }
  setBrothersAttrs();
});

onUnmounted(() => {
  if (observer.value) 관찰자.value.disconnect();
});

const setBrothersAttrs = () => {
  el = inst?.vnode.el;
  어린이 = el?.parentElement?.children;
  if (el && 어린이) {
    for (let i = 0; i < children.length; i++) {
      bro = children[i]로 놔두세요;
      if (bro === el) 계속;
      bro.style.zIndex = props.zIndex;
    }
  }
};

// Test.vue
<템플릿>
  

    <래퍼 이름="wrapper1" :z-index="1">
      
      

        <래퍼 이름="wrapper2" :z-index="2">
          
        
      
      <래퍼 이름="wrapper3" :z-index="3">
        
      
    
  


<스크립트 lang="ts" 설정>
"./Wrapper.vue"에서 래퍼 가져오기;;

// HTML 형식의 결과: 

  
  

    
  
  

Answer 1

Vue 렌더링 기능을 사용하면 더 간단하게 수행할 수 있습니다: 렌더 슬롯

으아악 으아악 으아악