我希望我的指令像 v-if 一样工作，因为在我的指令中，我必须检查访问权限并在元素没有访问权限时销毁它。
这是我的代码
Vue.directive('access', {
inserted: function(el, binding, vnode){
//check access
if(hasAccess){
vnode.elm.parentElement.removeChild(vnode.elm);
}
},
});
Vue 文件
<my-component v-access='{param: 'param'}'>
问题是我正在将此指令应用于组件，它删除了组件，而不是执行由创建/挂载的钩子调用的函数。
在组件(my-component(中，挂载/创建的钩子中有函数。这些函数的执行已经完成，我不希望执行这些函数。有没有办法停止执行挂载/创建的事件？
不可能在自定义指令中复制v-if的行为。指令无法控制虚拟节点的呈现方式，它们只对它所附加到的 DOM 元素产生影响。(v-if很特殊，它实际上不是一个指令，而是在编译模板时生成条件渲染代码。
虽然如果可能的话，我会避免做以下任何建议，但我还是会提供它们，因为它接近你想做的事情。
1. 扩展 Vue 原型以添加全局方法
您肯定需要使用v-if来进行条件渲染。因此，我们所要做的就是想出一个全局帮助程序方法来计算访问权限。
Vue.prototype.$access = function (param) {
// Calculate access however you need to
// ("this" is the component instance you are calling the function on)
return ...
}
现在，在您的模板中，您可以执行此操作：
<my-component v-if="$access({ param: 'param' })">
2. 在根组件中定义全局方法
这与 #1 基本相同，只是您只在根实例上定义方法，而不是用垃圾污染 Vue 原型：
new Vue({
el: '#app',
render: h => h(App),
methods: {
access(param) {
return ...
}
}
})
现在，在您的模板中，您可以执行此操作：
<my-component v-if="$root.access({ param: 'param' })">
现在，方法的定义位置更加清晰。
3. 使用全局混合
这可能并不理想，但对于它的价值，您可以调查全球混合的可行性。
4. 使用自定义组件
您可以创建一个自定义组件(理想情况下功能正常，但不必如此(，该组件可以计算模板中特定区域的访问权限：
Vue.component('access', {
functional: true,
props: ['param'],
render(h, ctx) {
// Calculate access using props as input
const access = calculateAccess(ctx.props.param)
// Pass the access to the default scoped slot
return ctx.scopedSlots.default(access)
}
})
在您的模板中，您可以执行以下操作：
<access :param="param" v-slot="access">
<!-- You can use `access` anywhere in this section -->
<div>
<my-component v-if="access"></my-component>
</div>
</access>
由于<access>是一个功能组件，因此它实际上不会呈现自己的组件实例。把它想象成一个函数，而不是一个组件。
对于您的情况来说有点矫枉过正，但如果您遇到更复杂的情况，仍然很有趣。