vue.js - 将自定义指令添加到 vuejs 渲染函数中的插槽

Question

我想创建一个无渲染组件，将自定义指令添加到它的根槽，并封装一些与该指令相关的行为。

我知道我可以使用 createElement()，将 directives 定义为其选项的一部分，然后返回一个 VNode。我还知道我可以通过 this.$slots.default[0] 访问渲染函数中的插槽。这已经包含一个 VNode，所以我无法将它传递给 createElement() 来添加指令。接下来我知道的是，我可以通过其属性 (VNode.data.directives...) 访问 VNode 的现有指令。

我能否以某种方式将所有这些组合起来以获取根槽，并向其添加指令而不创建包装元素？任何帮助/解释表示赞赏。

Answer 1

这对我有用。

export default {
    functional: true,
    render(h, ctx) {
        const slots = ctx.slots();
        const slot = slots.default[0];
        slot.data.directives = slot.data.directives || [];
        slot.data.directives.push({
            name: 'custom-directive',
        });
        return slot;
    },
};