VueJS：可以在模块中定义的指令中设置v指令吗？

Question

我正在创建一个主复选框混合，它管理masterCheckbox和followerCheckbox的状态。 不必在不同的复选框元素上多次设置类似v-model的指令，而是更好地设置一个可以解决这一问题的指令。

下面的示例不起作用，而是必须在使用mixin的组件上分别设置这些设置。 我是在做错什么，还是这不可能？

// define a mixin object
module.exports = {
    directives: {
        masterCheckbox: {
            // directive definition
            bind: function (el, binding, vnode) {
                el.setAttribute("v-on:click", "toggleMasterCheckbox");
                el.setAttribute("v-model", "masterCheckboxChecked");
                el.setAttribute(":indeterminate.prop", "masterCheckboxIndeterminate");
            }
        },
        followerCheckbox: {
            // directive definition
            bind: function (el, binding, vnode) {
                el.setAttribute("v-model", "checkedCheckboxes");
            }
        }
    },

    ...
}

Answer 1

指令不是属性，它们是Vue在创建HTML之前要处理的模板中的非HTML标记。 在Vue从模板创建属性后，就可以在DOM元素上设置属性了。 因此，您尝试做的事情无法完成。

您可能应该设置一个组件-可能是一个动态组件-在其模板中可以包含所有适当的指令，然后使用多个位置。 但我认为你的click和v-model的指令是要争取，因为v-model是不会改变的价值masterCheckboxChecked ，所以是toggleMasterCheckbox 。