Question

我想做这样的事情（它在观察者的财产中）：

        this: {
            $parent: {
                $parent: {
                    resizedEvent() {
                        console.log('Test')
                    }
                }
            }
        }

我试着把一些深深的＆＃39;他们内心的财产就像那样：

        this: {
            $parent: {
                $parent: {
                    resizedEvent() {
                        console.log('Test')
                    }
                }, deep: true
            }, deep: true
        }, deep: true

我的目标是到达一个名为resizedEvent的方法，可以在代码中调用它：

this.$parent.$parent.resizedEvent()

我该如何看待这种方法？

由于

Answer 1

如果您的问题得到了正确理解，那么当您遇到问题时，您就会尝试找到某种方法。无论是在儿童组件中还是在远离其他组件的其他地方＆＃34;？如果您为问题提供了更多上下文，那会更好。无论如何;

简而言之，父母＆lt; - ＆gt;子关系有一个golden rule：

父母向他们的孩子发送道具
儿童向其父母发送事件

＆＃34;保持父母和孩子一样非常重要尽可能通过明确定义的界面解耦＃34;

一般情况下，当您将自己嵌入野外组件区域时，尤其是当两个不相关的组件需要交换信息时，您应该考虑两件事：事件总线和 Flux数据管理。

他们都帮助你打击应用程序spagetti并保持同事和＃39;和你自己的理智。

活动巴士

全局事件总线允许您避免这样的情况。每当你的应用程序中的某个地方发生其他东西需要听的东西时，他们就可以发出事件然后听取他们各自的$ on返回。

像这样：在应用程序的主要入口点（通常类似于main.js）：

Vue.prototype.bus = new Vue()

这允许访问组件中的this.bus。然后，只要有需要发送的消息，您就可以执行类似的操作：

在内部组件中

created () { this.bus.$emit('component-created', true) }

依赖此信息的其他一些组件

created () { this.bus.$on('component-created', (data) => { // Do something with this information })

请注意： 过多的东西与其使用相矛盾。在整个地方发送消息使得其他人（甚至是您自己）很难知道哪些消息在哪里以及它们如何结合在一起。如果您发现自己过于依赖$emit和$on，那么流量状态管理就是您的选择。

流量数据管理

Flux数据管理允许存储应用程序范围的数据，以便在整个应用程序中以符合逻辑且最重要的方式可跟踪的方式访问。在VueJS中，这项工作由优秀的 Vuex 处理。它允许时间旅行，持久存储等等。

将常用功能迁移到库

另一种选择，取决于你实际上要做的事情（在撰写本文时仍然有点不清楚）是将这些方法的范围扩展为可以由组件导入的API。需要它。

在每个需要它的组件中，您可以执行以下操作：

import api from '@/libraries/api'

然后通过例如api.resize()访问所有功能性的好处。

您和之后与之合作的其他人都会感谢您。

进一步阅读

Vuex的州管理模式：https://vuex.vuejs.org/en/intro.html
全球赛事巴士：https://alligator.io/vuejs/global-event-bus/

观看父方法Vuejs

1 个答案: