Vue通过自定义指令实现内容替换的示例代码

function createTableColumnTag(el, binding) {
    // 创建一个新的 Vue 实例并挂载到 el 元素上
    const tagInstance = new Vue({
        render: h => h(Tag, {
            props: {}, // 传递给组件的属性
            domProps: {}, // 原生DOM的属性
            on: {}, // 事件监听
            nativeOn: {}, // 原生事件监听
            class: {}, // CSS类
            style: {}, // 样式
            attrs: {}, // 非prop属性
            slot: "", // 插槽
            scopedSlots: {}, // 作用于插槽
            key: "", // 唯一标识
            ref: "ref" // 用于获取元素
        })
    }).$mount();
    el.innerHTML = '';
    el.appendChild(tagInstance.$el);
    el.__vueTagInstance__ = tagInstance;
}

export default {
    // 挂载
    inserted(el, binding) {
        createTableColumnTag(el, binding);
    },
    // 更新
    componentUpdated(el, binding) {
        if (el.__vueTagInstance__) {
            // 先销毁，再重新挂载 避免丢失响应式
            el.__vueTagInstance__.$destroy();
        }
        createTableColumnTag(el, binding);
    },
    // 销毁
    unbind(el) {
        if (el.__vueTagInstance__) {
            el.__vueTagInstance__.$destroy();
        }
    }
};

import createTableColumnTag from './module/createTableColumnTag'

const install = function(Vue) {
  // 使用Vue.directive方法注册指令，需要传入两个参数：指令名称、指令方法
  Vue.directive('createTableColumnTag',createTableColumnTag)
}

export default install

import Vue from 'vue'
import directive from './directive'
// 全局注册
Vue.use(directive)

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

<el-table-column label="label" align="center" prop="value" >
    <template slot-scope="{ row }">
        <span v-createTableColumnTag="row['value']" ></span>
    </template>
</el-table-column>