Vue:安装新组件时进行检测

Question

我正在开发一个撤消功能，在用户单击"删除"按钮(类似于gmail(后，屏幕底部会弹出一个模态。现在，我想在安装undo组件时禁用"删除按钮"。undo组件和显示它的组件是不相关的，因此我无法$emit事件，并且希望避免使用事件总线。我知道this.$options.components保存有关已安装组件的信息，所以我基本上是在寻找watch更改$options.components的方法非常感谢您的帮助！

Answer 1

查看子组件的内部属性并不是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);
}
}