我完全懂你遇到的痛点——用Vue.extend手动实例化带插槽的组件时，只能传字符串插槽实在太受限了，没法实现带交互、嵌套组件这类复杂的插槽内容。下面给你几个在Vue 2环境下可行的解决方案，顺便也提一下Vue 3的处理方式：

方案一：手动构建VNode并赋值给组件实例的$slots #

Vue的插槽本质上是由VNode（虚拟节点）组成的数组，所以我们可以直接用Vue提供的createElement（也就是常说的h函数）来构建插槽内容的VNode，再赋值给组件实例的$slots.default（默认插槽）。

示例代码：

// 假设MyComponent是你定义的带插槽的组件
const Constr = Vue.extend(MyComponent);

// 用createElement构建复杂的插槽内容VNode
const slotContent = Vue.createElement('div', [
  Vue.createElement('p', '这是编程生成的插槽文本'),
  Vue.createElement('button', {
    on: {
      click: () => alert('插槽里的按钮被点击啦！')
    }
  }, '点击我触发事件'),
  // 甚至可以嵌套其他组件
  Vue.createElement(YourOtherComponent, {
    props: { someNestedProp: '嵌套组件的属性' }
  })
]);

// 实例化组件
const instance = new Constr({
  propsData: { someProp: 'My Heading' }
});

// 给默认插槽赋值VNode数组
instance.$slots.default = [slotContent];

// 挂载到页面
instance.$mount(document.body);

这种方式的好处是灵活，你可以完全控制插槽内容的结构、事件和嵌套关系，和模板里写的插槽效果完全一致。

方案二：扩展组件时通过render函数定义插槽 #

如果你需要复用这个带特定插槽的组件实例化逻辑，可以在Vue.extend时直接传入render函数，在render里渲染原组件并同时定义插槽内容：

示例代码：

const Constr = Vue.extend({
  extends: MyComponent,
  render(h) {
    // 用h函数渲染原组件，第三个参数就是插槽内容（VNode数组）
    return h(MyComponent, {
      props: { someProp: 'My Heading' }
    }, [
      h('p', '这是render函数里定义的插槽'),
      h('div', { class: 'slot-box' }, [
        h('span', '嵌套的插槽结构')
      ])
    ]);
  }
});

// 直接实例化挂载即可
const instance = new Constr().$mount(document.body);

这种方式把组件扩展和插槽定义整合在一起，适合需要多次创建相同插槽配置的组件实例的场景。

如果你用的是Vue 3 #

Vue 3里已经废弃了Vue.extend，转而使用createApp和h函数来手动实例化组件，插槽的定义方式更直观，直接在h函数的第三个参数里传入插槽对象：

import { createApp, h } from 'vue';

const instance = createApp({
  render() {
    return h(MyComponent, {
      someProp: 'My Heading'
    }, {
      // 默认插槽，值是返回VNode数组的函数
      default: () => [
        h('p', 'Vue 3的编程式插槽'),
        h('button', {
          onClick: () => alert('Vue 3插槽事件触发')
        }, '点击测试')
      ]
    });
  }
}).mount(document.body);

核心思路其实和Vue 2一致：用VNode替代字符串来定义插槽内容，这样就能实现任意复杂度的插槽啦。

内容的提问来源于stack exchange，提问作者Harshal Patil