快捷導航

Vue通過自定義指令實現(xiàn)內(nèi)容替換的示例代碼

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

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

拿elementui中的table組件作為示例

定義與使用：

1.指令方法文件：實現(xiàn)內(nèi)容自定義

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方法注冊指令，需要傳入兩個參數(shù)：指令名稱、指令方法
  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>

實現(xiàn)效果：

優(yōu)點：

靈活性高：可以根據(jù)綁定的值動態(tài)創(chuàng)建和更新組件，適應不同的需求。
代碼復用：將創(chuàng)建和更新組件的邏輯封裝在指令中，可以在多個地方復用這段邏輯，減少代碼重復。
與 Vue 生態(tài)系統(tǒng)集成：充分利用 Vue 的渲染函數(shù)和生命周期鉤子，與 Vue 生態(tài)系統(tǒng)無縫集成。
動態(tài)更新：通過 componentUpdated 鉤子，可以在數(shù)據(jù)變化時動態(tài)更新組件，確保顯示的內(nèi)容始終是最新的。