如何通过Vue自定义指令实现组件嵌套的优雅调用？

你的核心需求是通过v-inner指令简化组件包裹的写法，但自定义指令的原写法存在逻辑误区：Vue的指令只能操作当前绑定的组件/元素的DOM或VNode，无法直接改变父级的渲染结构，因此直接替换outerHTML或修改vnode无法达到预期效果。以下是两种可行的解决方案：

方案一：修改包裹组件+自定义指令DOM替换（快速实现） #

步骤1：重构ExternalComponent为插槽形式 #

先将原来通过innerComponent传参的方式，改为使用默认插槽，这样能更灵活地接收任意组件内容：

<!-- ExternalComponent.vue -->
<script setup lang="ts">
defineProps<{
  settings: { padding: number; backgroundColor: string };
}>();
</script>

<template>
  <div
    :style="`
      padding: ${settings.padding}px;
      background-color: ${settings.backgroundColor}`"
  >
    <slot /> <!-- 用默认插槽接收内部组件 -->
  </div>
</template>

步骤2：编写自定义指令实现DOM替换 #

在指令的mounted钩子中，创建ExternalComponent的实例，将当前组件的DOM移入包裹组件，再替换原DOM；updated钩子处理配置更新：

// main.ts
import { createApp, h, render } from "vue";
import App from "./App.vue";
import ExternalComponent from "./components/ExternalComponent.vue";

const app = createApp(App);

app.directive("inner", {
  mounted(el, binding) {
    // 创建包裹组件的VNode，将当前元素作为插槽内容
    const wrapperVNode = h(ExternalComponent, {
      settings: binding.value,
    }, () => el);

    // 创建临时容器渲染包裹组件
    const tempContainer = document.createElement("div");
    render(wrapperVNode, tempContainer);

    // 替换原DOM节点
    el.parentNode?.replaceChild(tempContainer.firstElementChild!, el);
  },
  updated(el, binding) {
    // 更新配置时同步修改样式（避免重新渲染组件）
    const wrapperEl = el.parentNode as HTMLElement;
    if (wrapperEl) {
      wrapperEl.style.padding = `${binding.value.padding}px`;
      wrapperEl.style.backgroundColor = binding.value.backgroundColor;
    }
  }
});

app.mount("#app");

现在你就可以用期望的写法调用：

<InnerComponent v-inner="{ padding: 200, backgroundColor: 'yellow' }" />

方案二：编译器插件实现语法糖（最优雅的简洁写法） #

如果想要完全贴合你的语法需求，且避免DOM操作的潜在问题，可以通过Vue编译器插件，将v-inner指令的写法编译为包裹组件的结构。

步骤1：安装依赖 #

需要安装@vue/compiler-sfc用于模板编译：

npm install @vue/compiler-sfc --save-dev

步骤2：编写Vite插件（适用于Vite环境） #

在vite.config.ts中添加自定义编译插件，将带有v-inner的组件标签转换为ExternalComponent包裹的结构：

// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { compileTemplate } from '@vue/compiler-sfc';

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          nodeTransforms: [
            (node) => {
              // 匹配带有v-inner指令的元素节点
              if (node.type === 1 && node.props.some(p => p.type === 7 && p.name === 'inner')) {
                // 提取v-inner的绑定值
                const innerProp = node.props.find(p => p.type === 7 && p.name === 'inner')!;
                // 移除v-inner指令
                node.props = node.props.filter(p => !(p.type === 7 && p.name === 'inner'));
                
                // 构造新的AST节点：ExternalComponent包裹当前组件
                return {
                  type: 1,
                  tag: 'ExternalComponent',
                  props: [
                    {
                      type: 6,
                      name: 'settings',
                      value: innerProp.value
                    }
                  ],
                  children: [node]
                };
              }
            }
          ]
        }
      }
    })
  ]
});

步骤3：全局注册ExternalComponent #

在main.ts中全局注册ExternalComponent，避免每个页面都导入：

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import ExternalComponent from "./components/ExternalComponent.vue";

const app = createApp(App);
app.component('ExternalComponent', ExternalComponent);
app.mount("#app");

现在你可以直接使用期望的写法，编译后的代码会自动转换为ExternalComponent包裹的结构，完全符合你的需求，且没有DOM操作的副作用。

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