VueJS 2.0 - 兄弟组件之间的通信 - $emit 和 $on

Question

我正在构建一个应用程序如下..让我们看看我正在使用的一个模型..（我在后台有 Laravel 5.3 只是提供基本视图和 API。

例如：客户。
在 example.com/admin/clients 我加载了两个组件<admin-clients-moderator>和<admin-clients-navigator> 。 Moderator 是一种用于修改当前选定客户端的表单。 导航器用于导航并选择您要操作的客户端。

它们都作为全局组件加载到根 Vue 中， #admin-app 。

在 Vue.js 1.0 中，我让根实例使用:selected-client.sync="selectedClient"加载两个组件，该组件与根数据变量"selectedClient"并且这些组件接受"selectedClient"作为道具，当导航器选择一个新客户端，导航器将更新selectedClient ，并且由于它是通过引用传递的，这将更新根实例，因此同步的版主也会更新，然后表单将填充该客户端的详细信息。

当表单被取消/保存时，我从组件$parent $broadcast一个事件，以便兄弟姐妹能够在“事件”中对其进行操作......

我正在尝试在 Vue.js 2.0 中复制此功能，但无法复制。

我已阅读更新从1.0到2.0的文件，但他们警惕的道具，我已经使用过的突变，而我一直无法如何找出到底如何，他们设置了$emit和$on使用的功能他们概述的eventHub 。

我不介意使用那个eventHub示例，但需要更多关于如何实现它的指导......

• 我可以在我的兄弟组件中使用$on吗？
• 我是否需要在每个根实例中单独定义它？
• 我是否应该为我正在处理的每个模型使用不同的根实例？
• 是否有适合于此的 vue 扩展/插件？
• 我什至以正确的方式接近这个吗？

下面的代码片段

我的 app.js

Vue.component(
    'admin-clients-moderator',
    require('./components/admin/clients/Moderator.vue')
);

Vue.component(
    'admin-clients-navigator',
    require('./components/admin/clients/Navigator.vue')
);

var mainApp = new Vue({
    el: '#app',
    data: {
        selectedClient: {}, // I don't think i need this anymore
    }
});

我的 Navigator.vue（简化版）

.... Template ....
        <tr v-for="client in collection">
            <td>{{ client.name }}</td>
            <td>{{ client.status }}</td>
            <td>
                <button class="btn btn-primary btn-xs"
                        @click="select(client)"
                >
                    <i class="fa-search fa"></i>
                </button>

                <button class="btn btn-danger btn-xs"
                        @click="remove(client)"
                >
                    <i class="fa-trash fa"></i>
                </button>
            </td>
        </tr>

.... Javascript ....

<script>
export default {
    props: [],
    data() {
        return {
            selectedClient: {},
            collection: [],
            // TRAIT
            resource: null,
            resourceUri: "",
            modelName: ""
        };
    },
    methods: {
        select(client) {
            this.$emit('client-selected', {client});
            this.selectedClient = client;
        },
        remove(client) {
            this.deleteModel(client)
        },

版主.vue

.... JaveScript


<script>
export default {
    props: [],
    data() {
        return {
            selectedClient: {},
            // TRAIT
            resource: null,
            resourceUri: "",
            modelName: ""
        };
    },
    computed: {
        newClient() {
            return (this.selectedClient.id == null
            || this.selectedClient.id == 0);
        }
    },
    created() {
        this.$on('client-selected', this.setSelectedClient);
    },
    methods: {
        setSelectedClient(client) {
            this.selectedClient = client;
        },

Answer 1

我可以在我的兄弟组件中使用 $on 吗？

是的。 您可以在父组件和兄弟组件中使用$on和$emit

我是否需要在每个根实例中单独定义它？

您可以添加全局变量。 但我通常这样做this.$root.$emit(my-event)

我是否应该为我正在处理的每个模型使用不同的根实例？

见#2

是否有适合于此的 vue 扩展/插件？

取决于您正在构建的应用程序，您可能需要检查Vuex

我什至以正确的方式接近这个吗？

到目前为止看起来是合法的。

Answer 2

每个 Vue 实例（根、子、兄弟）都是一个独立的事件中心。

您可以在实例上 $emit 事件，并且可以在同一实例上使用 $on 订阅事件通知。

您可以使用this.$root.$on()和this.$root.$emit()将根实例用作事件总线并实现您的目的。

你可以使用任何实例作为事件总线：$root 非常方便，因为它可以从任何带有 this.$root 的组件访问。 诀窍是所有 $emit() 和 $on() 都应该应用于同一个 vue 实例。