CODEWITHSUNDEEP
javascriptvue.jsvuejs3
zz z
zz z

Reputation: 27

how to create vnode directly inject to parent node in vue3

vue3 has changed its slot to children of the current node. basically, this is not what I want, by using

h('div', { ... }, slots.default()) : null

it will create another div tag like this

<div>
    <div>
     this is content
    </div>
</div>

But what I want to like this

<div>
this is content
</div>

are there some methods to achieve this?

Upvotes: 0

Views: 1601

Answers (1)

tony19
tony19

Reputation: 138196

Use h(slots.default) to render the default slot directly without a wrapper element (note slots.default is not invoked for this):

import { h } from 'vue'

export default {
  setup(props, { slots }) {
    return () => h(slots.default, {/* props */}, [/* children */])
  }
}

demo 1

Or the render function could just return slots.default() (assuming you don't need to modify any render properties or insert children):

export default {
  setup(props, { slots }) {
    return () => slots.default()
  }
}

demo 2

Upvotes: 2

Related Questions