如何解决this.$emit vs. this.$root.$emit，vuejs 最佳实践
我有使用 '''
document.addEventListener('DOMContentLoaded',function() {
// Use buttons to toggle between views
document.querySelector('#inBox').addEventListener('click',() => load_mailBox('inBox'));
document.querySelector('#sent').addEventListener('click',() => load_mailBox('sent'));
document.querySelector('#archived').addEventListener('click',() => load_mailBox('archive'));
document.querySelector('#test').addEventListener('click',compose_email);
document.querySelector('#compose').addEventListener('click',compose_email);
// By default,load the inBox
load_mailBox('inBox');
});
function compose_email() {
// Show compose view and hide other views
document.querySelector('#emails-view').style.display = 'none';
document.querySelector('#compose-view').style.display = 'block';
// Clear out composition fields
document.querySelector('#compose-recipients').value = '';
document.querySelector('#compose-subject').value = '';
document.querySelector('#compose-body').value = '';
};
function load_mailBox(mailBox) {
// Show the mailBox and hide other views
document.querySelector('#emails-view').style.display = 'block';
document.querySelector('#compose-view').style.display = 'none';
// Show the mailBox name
document.querySelector('#emails-view').innerHTML = `<h3>${mailBox.charat(0).toupperCase() + mailBox.slice(1)}</h3>`;
};
'''
添加和删除的 vue2 组件。在某些情况下，我通过发送方的 v-if 和接收方的 $emit 在它们之间进行通信。
我一直在使用 $on 来广播自定义事件，并使用 this.$root.$emit 来处理这些事件。我发现使用 this.$root.$on 需要 this.$root.$on（来自 this.$root.$off），否则移除的组件可能会尝试处理它，并且会发生不好的事情。
我有两个问题：
解决方法
-
this.$root.$emit和this.$emit有什么区别？
this.$root 获取根组件实例（通常为 App.vue），因此 this.$root.emit 从根组件发出事件。
this.$emit 只是从当前组件发出一个事件。
- 如果我使用
this.$on，是否还需要将它与this.$off配对？还是在移除组件时处理程序会自动“关闭”？
this.$off 不是必需的。是的，当组件被销毁时，处理程序会自动删除。
提醒一下，除非某些特殊情况，否则通常 root 发出永远不是一个好主意。为了支持这一点，实际上 vue3 删除了它的支持。
我什至不知道你为什么需要 $on，因为即使是那些几乎都是边缘情况。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。