Vue: обнаружение при установке нового компонента - PullRequest
Новая
       21

Vue: обнаружение при установке нового компонента

0 голосов
/ 10 апреля 2020

Я работаю над функцией отмены, когда модал появляется в нижней части экрана после того, как пользователь нажимает кнопку «удалить» (аналогично gmail). Теперь я хотел бы отключить «кнопку удаления», пока компонент отмены смонтирован. Компонент отмены и компонент, в котором он отображается, не связаны, поэтому я не могу $emit события и хотел бы избежать использования шины событий. Я знаю, что this.$options.components содержит информацию о смонтированных компонентах - поэтому я в основном ищу способ watch изменений $options.components Любая помощь очень ценится!

1 Ответ

1 голос
/ 10 апреля 2020

Просмотр внутренних свойств подкомпонентов на самом деле не является способом Vue, такие свойства, как $options, используются плагинами и тому подобным, но вы не должны использовать его в своем повседневном коде.

В идеале у вас должно быть v-if или событие, которое связывает их, но кажется, что это невозможно.

Поэтому вы должны поделиться состоянием с Vuex и иметь условное поведение, основанное на этом общее состояние. Что-то вроде: 

// store.js
export default new Vuex.Store({
  state: {
    userCanUndo: false,
  },
  mutations: {
    setUserCanUndo(state, value) {
      state.userCanUndo = value;
    }
  },
}

// Undo.vue
<template>
  <div v-if="userCanUndo">
    <!-- ... -->
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['userCanUndo']),
  },
}
</script>

// DeleteButton.vue
<template>
  <button :disabled="userCanUndo" @click="delete">
    Delete
  </button>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['userCanUndo']),
  },
  methods: {
    ...mapMutations(['setUserCanUndo']),
    delete() {
      // your delete code here
      this.setUserCanUndo(true);
      setTimeout(() => { this.setUserCanUndo(false); }, 2000);
  }
}
...