在子组件中定义指令并在父组件Vuejs中调用

Question

我有一个带有自定义style指令（v风格）的自定义Button组件，以添加一些类：

directives: {
        style: {
            bind(el, binding) {
                const style = binding.value;

                if (!["primary", "success", "error"].includes(style)) {
                    throw new TypeError(`Button style ${style} not valid`);
                }

                el.classList.add(`button-${style}`);
            }
        }
    }

在父组件中，我想以这种方式使用该指令：

<template>
    <div>
        <Button v-style="'primary'">Send</Button>
    </div>
</template>

但是它不起作用。我应该创建一个全局指令并检查元素是否绑定或有更好的方法吗？

Vue.directive("style", {...});