vue.js - 如何在vue.js自定义指令中传递动态参数

<template>
    <div>
        <img v-directive:dynamic_literal />
    </div>
</template>

例如。 dynamic_literal ='确定'
这样在自定义指令中:

Vue.directive('directive', {
    bind(el, binding) {  binding.arg  // should return 'ok'

如何将dynamic_literal用作应在data或prop下分配其值的变量或常量。

我尝试使用v-directive:{{dynamic_literal}}和:v-directive =“dynamic_literal”，但没有用。

提前致谢!

最佳答案

有点晚了，但也许有些用处...您实际上可以通过使用传递给指令 Hook 函数的vnode参数在Vue指令中获取动态参数。我们将使用参数本身作为要在vnode上下文中访问的属性名称。例如，这也适用于计算的属性。

Vue.directive('directive', function(el, binding, vnode){
    el.innerHTML = vnode.context[binding.arg];
});

new Vue({
    el: '#app',
    template: '<div v-directive:argument></div>',
    data: {
        argument: 0
    },
    mounted() {
        setInterval(() => ++this.argument, 1000);
    }
});

(在此处将function shorthand用于指令)

JSFiddle

关于vue.js - 如何在vue.js自定义指令中传递动态参数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45223018/