将自定义指令添加到 vuejs 渲染函数中的插槽答案

【问题标题】：Adding custom directive to a slot in vuejs render function将自定义指令添加到 vuejs 渲染函数中的插槽
【发布时间】：2020-06-28 21:15:57
【问题描述】：

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

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

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

【问题讨论】：

有没有什么玩具例子可以满足你的需求？我不确定我是否理解这种复杂的设计可以让你做一些基本组件和指令无法做到的事情。
我会先在评论中尝试一下，也许它会有所帮助：我有一个外部库，它提供了一个可以放置在我的某些组件上的指令。对于这些组件中的每一个，我还需要挂载钩子中的特殊行为来纠正由已经提到的库与另一个库的组合引起的一个特定问题。我想创建一个无渲染组件，它将封装添加这个挂载的钩子+指令到它的插槽，这样我就可以在我的组件周围使用它。
我会尝试：1. mixin 和拦截 created/beforeCreate，2. wrapper 指令，3. 操作元素的附加指令，4. 功能性“代理”组件
看来我的设想在技术上并不完全可行，对吧？我的意思是从渲染函数向插槽添加指令。

标签： vue.js vuejs2

【解决方案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;
    },
};

【讨论】：