Vuejs - 通过指令删除组件并且正在执行 mounted/created 事件时出现问题

Question

我希望我的指令像 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'}'>

问题是我正在将此指令应用于一个组件，它正在删除该组件，而不是执行由 created/mounted 挂钩调用的函数。

在组件（我的组件）中有 mounted/created 钩子中的函数。这些功能的执行已经完成，我不想让这些功能被执行。有没有办法停止执行 mounted/created 事件？

Answer 1

无法在自定义指令中复制 v-if 的行为。指令无法控制 vnode 的渲染方式，它们只影响它所附加的 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。使用全局混合

这可能并不理想，但对于它的价值，您可以研究 global mixin.

的可行性

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> 是一个功能组件，它实际上不会呈现它自己的组件实例。把它看成一个函数而不是一个组件。

对于你的情况来说有点矫枉过正，但如果你遇到更复杂的情况，仍然很有趣。

Vuejs - 通过指令删除组件并且正在执行 mounted/created 事件时出现问题

Vuejs - Issue when removing a component via directives and the mounted/created event is being executed

javascript

vue.js

vue-directives

1。扩展 Vue 原型以添加全局方法

2。在根组件中定义全局方法

3。使用全局混合

4。使用自定义组件