如何以编程方式创建 Vue.js 插槽？

Question

我有以下带插槽的组件：

<template>
    <div>
        <h2>{{ someProp }}</h2>
        <slot></slot>
    </div>
</template>

由于某些原因，我必须手动实例化这个组件。 这就是我的做法：

const Constr = Vue.extend(MyComponent);
const instance = new Constr({
    propsData: { someProp: 'My Heading' }
}).$mount(body);

问题是：我无法以编程方式创建插槽内容。 到目前为止，我可以创建简单的基于字符串的插槽：

const Constr = Vue.extend(MyComponent);
const instance = new Constr({
    propsData: { someProp: 'My Heading' }
});

// Creating simple slot
instance.$slots.default = ['Hello'];

instance.$mount(body);

问题是 - 如何$slots编程方式创建$slots并将其传递给我使用new创建的实例？

注意：我没有使用完整版本的 Vue.js（仅限运行时）。 所以我没有可用于即时编译模板的 Vue.js 编译器。

Answer 1

我查看了Vue.js TypeScript 定义文件，我在 Vue 组件实例上发现了一个未记录的函数： $createElement() 。 我的猜测是，它与传递给组件的render(createElement)函数的函数相同。 因此，我可以将其解决为：

const Constr = Vue.extend(MyComponent);
const instance = new Constr({
    propsData: { someProp: 'My Heading' }
});

// Creating simple slot
const node = instance.$createElement('div', ['Hello']);
instance.$slots.default = [node];

instance.$mount(body);

但这显然是没有记录的，因此是有问题的方法。 如果有更好的方法可用，我不会将其标记为已回答。

Answer 2

我想我终于偶然发现了一种以编程方式创建插槽元素的方法。 据我所知，该方法似乎不适用于功能组件。 我不知道为什么。

如果您正在为组件实现自己的渲染方法，则可以使用 createElement 方法（或您在渲染方法中为其指定别名的任何方法）以编程方式创建传递给子元素的槽，并传递包含 { slot : NAME_OF_YOUR_SLOT } 后跟该插槽中的子项数组。

例如：

 Vue.config.productionTip = false Vue.config.devtools = false; Vue.component('parent', { render (createElement) { return createElement('child', [ createElement('h1', { slot: 'parent-slot' }, 'Parent-provided Named Slot'), createElement('h2', { slot: 'default' }, 'Parent-provided Default Slot') ]) } }) Vue.component('child', { template: '<div><slot name="parent-slot" /><slot /></div>' }) new Vue({ el: '#app', template: '<parent />' })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <div id='app'> </div>

Answer 3

（这并没有真正回答How to create Vue.js slot programatically? 。但它确实解决了您的问题。）

与使用$createElement()相比，这个技巧不那么骇人听闻。

基本上，创建一个将MyComponent注册为本地组件的新组件。

const Constr = Vue.extend({
  template: `
  <MyComponent someProp="My Heading">
    <div>slot here !!!</div>
  </MyComponent>
  `,
  components: {
    MyComponent: MyComponent
  }
});
const instance = new Constr().$mount('#app');

演示： https : //jsfiddle.net/jacobgoh101/shrn26p1/

Answer 4

我刚刚在 vue 论坛上找到了一个答案： slots

原理是：没有像 createElement('slot'..) 这样的东西，而是有一个渲染函数，它提供带槽的innerHtml 作为函数：$scopedSlots.default()

用法：

 render: function (createElement) { const self = this; return createElement("div", this.$scopedSlots.default()); }

如果您想在没有为插槽提供内容的情况下提供默认值，您需要自己编写一个区分并呈现其他内容。 （上面的链接有一个更详细的例子）

该函数返回一个数组，因此它不能用作渲染函数的根。 它需要被包装到单个容器节点中，如上例中的div 。