Question

我有一个自定义指令，可挂载自定义组件并将其添加到DOM。必要时，它用于在组件上创建覆盖。

import Vue from 'vue';
import Overlay from '@/components/Overlay.vue';

Vue.directive('loading', {
  bind(el, b, vnode) {
    const ComponentClass = Vue.extend(Overlay);
    const instance = new ComponentClass();
    vnode.context[`_overlayInstance${instance._uid}`] = instance;
    instance.$mount();
    el.style.position = 'relative';
    el.appendChild(instance.$el);
    el.setAttribute('data-overlay', instance._uid);
  },
  update(el, b, vnode) {
    const v = vnode.context.reloading;
    const id = el.getAttribute('data-overlay');
    vnode.context[`_overlayInstance${id}`].show = v;
  },
});

Overlay.vue组件非常基础。

<template>
  <v-fade-transition>
    <div v-if="show" class="overlay">
      .....
    </div>
  </v-fade-transition>
</template>

<script>
export default {
  name: 'overlay',
  data() {
    return {
      show: false,
    };
  },
};
</script>

“重新加载”来自用于管理刷新（此处是相关部分）的mixins。

const callRefresh = (scope, type) => {
  if ('refresh' in scope && typeof scope.refresh === 'function') {
    scope.reloadingState = new Promise(async () => {
      await scope.refresh(type);
      scope.reloadingState = null;
    });
  } else scope.reloadingState = null;
};

export default {
  data() {
    return {
      reloadingState: null,
    };
  },
  mounted() {
    if (!this.reloadingState) {
      callRefresh(this, 'INIT');
    }
  },
  reloading() {
    return this.reloadingState !== null;
  },
}

因此，当mixin内部的callRefresh被触发并且重新加载变为true时，我可以正确看到覆盖层出现，但是当重新加载变为false时，除非我在模板中添加了{{ reloading }}之类的覆盖层，否则该覆盖层不会被隐藏。看来context.show中的更改不会触发任何观察者。我缺少与Vue反应性相关的东西吗？

Vue动态组件内部指令不响应

0 个答案: