如何将 Vue 的动态组件与片段一起使用？

Question

是否可以使用 Vue 的 <component> 有条件地渲染组件或 nothing 代替？

例如，考虑以下模式：

<component :is="hasTooltip ? 'CustomTooltip' : 'div'">
  <div>Hover over me!</div>
</component>

在这种情况下，当 hasTooltip 值为真时，我们将渲染一个 CustomTooltip 组件，否则我们将渲染一个正常的 div。是否可以渲染一个片段来代替这个 div（就像 React 中的 <> 片段），它将在浏览器中被剥离？这将如何实现？我在 Vue 2.0.

有条件地渲染组件将不起作用，因为我们想要“将鼠标悬停在我身上！”无论如何都要呈现的文本。

Answer 1

也许是这样的？

Vue.component('tooltip', {
  template: `<div> Tooltip for: <slot></slot> </div>`
})

Vue.component('wrap-if', {
  functional: true,
  props: ['wrap', 'wrapper'],
  render(h, ctx) {
    
    if (ctx.props.wrap) {
      return h(ctx.props.wrapper, ctx.data, ctx.children)
    } else {
      // maybe check that children.length === 1 as Vue 2 does not support fragments
      return ctx.children
    }
  }
})

new Vue({
  el: '#app',
  data: {
    wrap: true
  }
})

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

<div id="app">
  <wrap-if :wrap="wrap" wrapper="tooltip">
      <span>This is always rendered no matter what</span>
  </wrap-if>
  <br>
  <button @click="wrap = !wrap">Toggle</button>
  <pre>{{$data}}</pre>
</div>

Answer 2

只是将对此的一些其他评论合并为一个答案。

在 Vue-2 中似乎没有干净的方法来有条件地包装没有插件的组件，因为片段不可用。

但是，可以使用 Vue-2 片段插件或在 Vue3 中使用 fragment 组件来实现相同的模式，如答案中所示。不是渲染 div，而是渲染片段。

如何将 Vue 的动态组件与片段一起使用？

How to use Vue's Dynamic Component with a Fragment?

javascript

vue.js

vuejs2

vuejs3