如何使用vue3获取插槽中的HTMLElements？

Question

当我尝试开发Layer组件时发生了一些事情。代码如下：//Wrapper.vue&lt;template&gt;&lt;slotv-bind="attrs"&gt;&lt;/slot&gt;&lt;/template&gt;&lt;scriptlang="ts&qu

P粉714890053 · Answer

使用 Vue 渲染函数可以更简单地完成：渲染槽

const { createApp, h } = Vue;

const Wrapper = {
  props:  {
    name: { type: String, default: "" },
    zIndex: { type: Number, default: 0 },
  },
  setup(props, { slots }) {
    let children = slots.default();
    if (children) {
      for (let i = 0; i < children.length; i++) {
        children[i].props.style = `z-index: ${props.zIndex}`;
      }
    }  
    return () => slots.default()
  }
}

const App = { 
  components:  { Wrapper }
}

const app = createApp(App)
const vm = app.mount('#app')

#app { line-height: 2; }
[v-cloak] { display: none; }


   
   Test