如何用Vue自定义指令渲染x-template？迁移AngularJS指令至Vue

嘿，刚好我之前做过类似的AngularJS到Vue的迁移，给你梳理下最合理的实现方式——其实Vue里更推荐用组件来替代AngularJS中带模板的指令（毕竟指令更多是用来做DOM操作，组件才是UI复用的核心），不过我也会顺便提下如果非要用自定义指令的实现方式，先看最推荐的组件方案：

这和你原来AngularJS指令的思路最匹配，组件自带模板、属性传递、生命周期管理，完全能满足你的需求：

1. 创建Project组件 #

新建一个Project.vue文件，把原来project.tpl.html的内容放到组件的<template>里，同时定义接收的属性（对应原来AngularJS指令里的绑定属性）：

<template>
  <!-- 这里直接放原来project.tpl.html中的HTML内容 -->
  <div class="project-content">
    <!-- 示例：使用props传递的数据渲染内容 -->
    <h4>{{ project.title }}</h4>
    <!-- 根据属性控制删除按钮显示 -->
    <button 
      v-if="projectAllowDelete && projectShowDeleteAction"
      @click="triggerDelete"
    >
      删除项目
    </button>
    <!-- 进度和状态展示 -->
    <div v-if="projectShowProgress" class="progress-bar">
      进度：{{ project.progress }}%
    </div>
    <div v-if="projectShowStatus" class="status-tag">
      状态：{{ project.status }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Project',
  // 定义需要接收的props，对应原AngularJS中的属性
  // Vue中props用驼峰命名，模板中使用短横线分隔的属性名
  props: {
    project: {
      type: Object,
      required: true, // 必须传入项目数据
    },
    projectOnDelete: {
      type: Function,
      required: true, // 接收父组件的删除回调
    },
    projectShowDeleteAction: {
      type: Boolean,
      default: false, // 默认不显示删除按钮
    },
    projectAllowDelete: {
      type: Boolean,
      default: false, // 默认不允许删除
    },
    projectShowProgress: {
      type: Boolean,
      default: false,
    },
    projectShowStatus: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    triggerDelete() {
      // 调用父组件传递的删除方法，并传入当前项目
      this.projectOnDelete(this.project);
    },
  },
};
</script>

2. 在父组件中使用Project组件 #

和你原来Twig中的写法几乎一致，只需要把<project>标签换成我们定义的组件（注意Vue中组件名如果是驼峰，模板里可以用短横线或者直接驼峰，推荐短横线风格）：

<template>
  <a class="animated fade-in-right" v-for="project in projects" :key="project.id">
    <Project 
      :project="project"
      :project-on-delete="onDelete"
      :project-show-delete-action="true"
      :project-allow-delete="project.ownerId === user.id"
      :project-show-progress="true"
      :project-show-status="true"
    />
  </a>
</template>

<script>
// 引入Project组件
import Project from './Project.vue';

export default {
  components: {
    Project, // 注册组件
  },
  data() {
    return {
      projects: [], // 你的项目列表数据
      user: {}, // 当前登录用户数据
    };
  },
  methods: {
    onDelete(project) {
      // 这里写你的删除逻辑，比如调用接口删除项目
      console.log('要删除的项目：', project);
    },
  },
};
</script>

如果因为某些原因一定要用自定义指令（比如严格匹配原有标签写法），可以这样实现，但这种方式需要手动管理Vue实例，维护成本更高：

1. 注册全局自定义指令 #

// 在Vue实例初始化前注册指令
Vue.directive('project', {
  bind(el, binding, vnode) {
    // 1. 准备模板内容（对应原来的project.tpl.html）
    // 你可以直接写在这里，或者通过fetch异步加载模板文件
    const template = `
      <div class="project-content">
        <h4>{{ project.title }}</h4>
        <button v-if="allowDelete && showDeleteAction" @click="handleDelete">删除</button>
        <div v-if="showProgress">进度：{{ project.progress }}%</div>
        <div v-if="showStatus">状态：{{ project.status }}</div>
      </div>
    `;

    // 2. 编译模板并创建Vue实例
    const compiled = Vue.compile(template);
    const vm = new Vue({
      render: compiled.render,
      staticRenderFns: compiled.staticRenderFns,
      data() {
        return {
          // 把指令绑定的数据传递给模板
          project: binding.value.project,
          showDeleteAction: binding.value.showDeleteAction,
          allowDelete: binding.value.allowDelete,
          showProgress: binding.value.showProgress,
          showStatus: binding.value.showStatus,
        };
      },
      methods: {
        handleDelete() {
          // 调用父组件的删除方法
          binding.value.onDelete(binding.value.project);
        },
      },
    }).$mount(); // 挂载到虚拟DOM

    // 3. 将渲染后的DOM添加到目标元素中
    el.appendChild(vm.$el);
  },
});

2. 在模板中使用指令 #

<a class="animated fade-in-right" v-for="project in projects" :key="project.id">
  <div v-project="{
    project: project,
    onDelete: onDelete,
    showDeleteAction: true,
    allowDelete: project.ownerId === user.id,
    showProgress: true,
    showStatus: true
  }"></div>
</a>

最后提醒 #

Vue的自定义指令设计初衷是操作DOM元素（比如自动聚焦、文本高亮），而复用UI组件的场景，组件是更合适的选择——它的props传递、生命周期、模板管理都比指令更清晰，维护起来也更方便，所以优先推荐方案一。

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