Vue3自定义指令中动态参数的使用

作者：温新

时间：2021-08-11

hi，我是温新，一名PHPer

动态指令参数：指令的参数可以是动态的，也就是可以变化的。如v-mydirective:[argument]="value"中，argument参数可以根据组件实例数据进行更新！

基本案例

<script>
    const directives = {
        styles: {
            // 自定义指令参数
            mounted(el, params){
                console.log(el, params)
            }
        }
    };

    const app = Vue.createApp({
        directives,
        template:`<p v-styles="'green'">使用动态指令参数灵活修改元素样式</p>`
    });

    app.mount('#app');
</script>

请观察el与params这个数据，params为第二参数，接收指令参数数据。打印出来的params中的arg为自定义参数键名（参数），value是参数值。

基础使用：修改元素文本颜色

<div id="app"></div>

<script>
    const directives = {
        styles: {
            mounted(el, params){
                // 修改文本颜色为绿色
                el.style.color=params.value;
            }
        }
    };

    const app = Vue.createApp({
        directives,
        // 传入颜色
        template:`<p v-styles="'green'">使用动态指令参数灵活修改元素样式</p>`
    });

    app.mount('#app');
</script>

灵活的使用动态参数修改样式

<script>
    const directives = {
        styles: {
            mounted(el, params){
                console.log(params)
                // 修改文本颜色为绿色
                el.style[params.arg]=params.value;
            }
        }
    };

    const app = Vue.createApp({
        directives,
        // 传入颜色
        template:`<p v-styles:fontWeight="'bold'">使用动态指令参数灵活修改元素样式</p>`
    });

    app.mount('#app');
</script>

使用动态参数之后想改什么样式就如什么样式。比如：我现在后悔了，加粗太不符合本页面了，我要修改成背景色为绿色。思考下，如果不使用动态参数该怎么做？

使用了动态参数后，非常的方便，如下修改行：

const app = Vue.createApp({
directives,
	// 修改颜色
	template:`<p v-styles:background="'green'">使用动态指令参数灵活修改元素样式</p>`
});

绑定的参数为background，其值是green

与数据进行绑定

<div id="app"></div>

<script>
    const directives = {
        styles: {
            // 只使用mounted时，修改样式不会发生变化
            mounted(el, params){
                el.style[params.arg]=params.value;
            },
            // 要使得修改样式发生变化需要使用updated进行重新渲染
            updated(el, params){
                el.style[params.arg]=params.value;
            }
        }
    };

    const app = Vue.createApp({
        directives,
        data () {
            return {
                background:'red'
            }
        },
        // 传入颜色
        template:`<p v-styles:background="background">使用动态指令参数灵活修改元素样式</p>`
    });

    const vm = app.mount('#app');
</script>

主要注意的是，若没有updated，那么在控制台对样式进行修改，元素的样式是不会发生变化的。如vm.$data.background="pink"；要想样式发生变化，就必须使用updated就行更新并重新渲染页面。

mounted与updated的写是一样的，此时可以对它进行简化操作。

注意：我这里换成全局自定义组件。案例如下：

<div id="app"></div>


<script>
    const app = Vue.createApp({
        data () {
            return {
                background:'red'
            }
        },
        // 传入颜色
        template:`<p v-styles:background="background">使用动态指令参数灵活修改元素样式</p>`
    });

    // created与updated操作一样时，简化写法
    app.directive('styles',(el,params) => {
        el.style[params.arg]=params.value;
    });

    const vm = app.mount('#app');
</script>

我是温新

第天进步一点，就一点点