Vue通過自定義指令實現內容替換的示例代碼

更新時間：2025年03月28日 09:31:21 作者：有本事沙拉

這篇文章主要介紹了利用Vue通過自定義指令實現內容替換的方法,通過Vue.directive指令定義函數來實現內容自定義,通過指令定義函數的三個鉤子函數（inserted、componentUpdated、unbind）來實現自定義內容的掛載、更新和銷毀,需要的朋友可以參考下

拿elementui中的table組件作為示例

定義與使用：

1.指令方法文件：實現內容自定義

function createTableColumnTag(el, binding) {
    // 創(chuàng)建一個新的 Vue 實例并掛載到 el 元素上
    const tagInstance = new Vue({
        render: h => h(Tag, {
            props: {}, // 傳遞給組件的屬性
            domProps: {}, // 原生DOM的屬性
            on: {}, // 事件監(jiān)聽
            nativeOn: {}, // 原生事件監(jiān)聽
            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();
        }
    }
};

2.創(chuàng)建指令（建議創(chuàng)建一個單獨的文件進行統(tǒng)一注冊+導出）

import createTableColumnTag from './module/createTableColumnTag'

const install = function(Vue) {
  // 使用Vue.directive方法注冊指令，需要傳入兩個參數：指令名稱、指令方法
  Vue.directive('createTableColumnTag',createTableColumnTag)
}

export default install

3.在main.js文件中將指令注冊到全局

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

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

4.使用 v-指令名的方式使用

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